/* === Base Styles === */
:root {
    --color-bg: #0f0f14;
    --color-bg-secondary: #1a1a24;
    --color-bg-tertiary: #252532;
    --color-text: #e8e6e3;
    --color-text-muted: #8b8b8b;
    --color-primary: #7c5cff;
    --color-primary-hover: #9577ff;
    --color-accent: #ff6b6b;
    --color-success: #4ecdc4;
    --color-border: #333344;
    --font-main: 'Georgia', serif;
    --font-ui: system-ui, -apple-system, sans-serif;
    --radius: 8px;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

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

html, body {
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-text);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    line-height: 1.6;
}

/* === Buttons === */
button {
    font-family: var(--font-ui);
    cursor: pointer;
    border: none;
    border-radius: var(--radius);
    padding: 12px 24px;
    font-size: 1rem;
    transition: all 0.2s ease;
}

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

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), #5a3fd4);
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(124, 92, 255, 0.3);
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-primary-hover), #6b4de0);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 92, 255, 0.4);
}

.btn-back {
    background: transparent;
    color: var(--color-text-muted);
    padding: 8px 16px;
    border: 1px solid var(--color-border);
}

.btn-back:hover {
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

/* === Game Home Page === */
.game-home {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 20px;
    min-height: 100vh;
}

.game-header {
    text-align: center;
    margin-bottom: 60px;
}

.game-header h1 {
    font-size: 3.5rem;
    margin: 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
}

.game-header .subtitle {
    color: var(--color-text-muted);
    font-size: 1.2rem;
    margin-top: 10px;
    font-style: italic;
}

.game-actions {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.new-game-section,
.load-game-section {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 30px;
}

.new-game-section h2,
.load-game-section h2 {
    font-family: var(--font-ui);
    font-size: 1.3rem;
    margin: 0 0 20px 0;
    color: var(--color-text);
}

.world-selector {
    margin-bottom: 20px;
}

.world-selector label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.world-selector select {
    width: 100%;
    padding: 12px 16px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 1rem;
    cursor: pointer;
}

.world-selector select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Session Cards */
.session-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.session-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: all 0.2s ease;
    overflow: hidden;
}

.session-card:hover {
    border-color: var(--color-primary);
}

.session-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding: 16px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.session-content:hover {
    background: rgba(var(--color-primary-rgb, 139, 92, 246), 0.05);
}

.btn-delete-session {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 100%;
    min-height: 70px;
    background: transparent;
    border: none;
    border-left: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete-session:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Confirm Delete Modal */
.confirm-modal {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
    max-width: 450px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.2s ease-out;
}

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

.confirm-modal-header {
    padding: 20px 24px 12px;
    border-bottom: 1px solid var(--color-border);
}

.confirm-modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-text);
}

.confirm-modal-body {
    padding: 20px 24px;
}

.confirm-modal-body > p {
    margin: 0 0 16px;
    color: var(--color-text);
}

.session-to-delete-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.session-to-delete-info strong {
    color: var(--color-text);
    font-size: 1rem;
}

.session-to-delete-info span {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.session-to-delete-info .event-count {
    font-size: 0.85rem;
    opacity: 0.7;
}

.warning-text {
    margin: 0;
    padding: 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius);
    color: #fca5a5;
    font-size: 0.9rem;
}

.confirm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--color-border);
}

.session-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.session-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: 2px;
}

.session-world {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.session-location {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.session-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.no-worlds {
    text-align: center;
    padding: 40px;
    color: var(--color-text-muted);
}

/* === Game Play Page === */
.game-play {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 900px;
    margin: 0 auto;
}

.game-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
}

.game-toolbar-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.game-info {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
}

.world-name {
    color: var(--color-primary);
    font-weight: 600;
}

/* Location breadcrumb */
.location-breadcrumb {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.location-breadcrumb.has-tooltip {
    cursor: default;
}

.breadcrumb-item {
    color: var(--color-text-secondary);
    transition: color 0.15s ease;
}

.breadcrumb-item:last-child {
    color: var(--color-text);
    font-weight: 500;
}

.breadcrumb-separator {
    color: var(--color-text-muted);
    opacity: 0.5;
}

.breadcrumb-ellipsis {
    color: var(--color-text-muted);
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Breadcrumb tooltip */
.breadcrumb-tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    white-space: nowrap;
    animation: tooltipSlideDown 0.15s ease;
}

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

.breadcrumb-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 20px;
    border: 6px solid transparent;
    border-bottom-color: var(--color-border);
}

.breadcrumb-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 21px;
    border: 5px solid transparent;
    border-bottom-color: var(--color-bg-secondary);
}

.breadcrumb-tooltip-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.breadcrumb-tooltip-item.current {
    color: var(--color-text);
    font-weight: 500;
}

.breadcrumb-tooltip-item.current .breadcrumb-tooltip-name {
    color: var(--color-primary);
}

.breadcrumb-tooltip-indent {
    display: flex;
    align-items: center;
    gap: 0;
}

.breadcrumb-tooltip-indent .indent-line {
    width: 16px;
    height: 1px;
}

.breadcrumb-tooltip-indent .indent-corner {
    color: var(--color-text-muted);
    opacity: 0.5;
    font-family: monospace;
    font-size: 0.75rem;
    width: 12px;
    margin-right: 2px;
}

.breadcrumb-tooltip-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.breadcrumb-tooltip-name {
    flex: 1;
}

/* Chat Container */
.chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chat-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Chat Messages */
.chat-message {
    max-width: 85%;
    animation: fadeIn 0.3s ease;
}

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

.chat-message.user {
    align-self: flex-end;
}

.chat-message.assistant {
    align-self: flex-start;
}

.message-content {
    padding: 16px 20px;
    border-radius: 16px;
    line-height: 1.7;
}

.chat-message.user .message-content {
    background: linear-gradient(135deg, var(--color-primary), #5a3fd4);
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-message.assistant .message-content {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-bottom-left-radius: 4px;
}

.message-content p {
    margin: 0 0 12px 0;
}

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

.message-meta {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.chat-message.user .message-meta {
    text-align: right;
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 8px 0;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    background: var(--color-text-muted);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Streaming cursor */
.streaming-cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: var(--color-primary);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: blink-cursor 0.8s step-end infinite;
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Generation Progress Indicator */
.generation-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.generation-dots {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.generation-dots span {
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
    animation: generationBounce 1.4s infinite ease-in-out both;
}

.generation-dots span:nth-child(1) { animation-delay: -0.32s; }
.generation-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes generationBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

.generation-status {
    color: var(--color-text-secondary);
    font-style: italic;
    font-size: 0.9rem;
    animation: statusFadeIn 0.3s ease-out;
}

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

/* === Game Start Modal === */
.game-start-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 8, 14, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: gsOverlayIn 0.5s ease-out;
}

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

.game-start-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 44px 52px 40px;
    max-width: 420px;
    width: 90vw;
    background: linear-gradient(
        165deg,
        rgba(30, 30, 48, 0.9) 0%,
        rgba(20, 20, 32, 0.95) 100%
    );
    border: 1px solid rgba(124, 92, 255, 0.12);
    border-radius: 20px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03),
        0 8px 40px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(124, 92, 255, 0.06);
    animation: gsCardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes gsCardIn {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Progress ring --- */
.game-start-ring-section {
    position: relative;
    width: 110px;
    height: 110px;
    flex-shrink: 0;
}

.game-start-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 3.5;
}

.ring-fill {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 276.46;
    transition: stroke-dashoffset 0.4s ease-out;
    filter: drop-shadow(0 0 4px rgba(124, 92, 255, 0.5));
}

.ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ring-value {
    font-family: var(--font-ui);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}

.ring-unit {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 1px;
}

/* --- Title + description --- */
.game-start-info {
    text-align: center;
}

.game-start-title {
    font-family: var(--font-main);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 6px;
    letter-spacing: 0.01em;
}

.game-start-description {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: 0;
    font-style: italic;
    min-height: 1.3em;
    animation: gsDescFade 0.35s ease-out;
}

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

/* --- Timeline --- */
.game-start-timeline {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 4px;
}

.gs-step {
    display: flex;
    gap: 12px;
    min-height: 36px;
}

.gs-step-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20px;
    flex-shrink: 0;
    position: relative;
}

.gs-step-track::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5px;
    bottom: 0;
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.4s ease;
}

.gs-step:last-child .gs-step-track::after {
    display: none;
}

.gs-step.completed .gs-step-track::after {
    background: rgba(78, 205, 196, 0.25);
}

.gs-step.active .gs-step-track::after {
    background: rgba(124, 92, 255, 0.2);
}

/* Dot */
.gs-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.gs-step.pending .gs-dot {
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    background: var(--color-bg);
}

.gs-step.active .gs-dot {
    border: none;
    background: var(--color-primary);
    box-shadow: 0 0 10px rgba(124, 92, 255, 0.5);
}

.gs-step.completed .gs-dot {
    border: none;
    background: var(--color-success);
}

.gs-check {
    width: 10px;
    height: 10px;
}

.gs-check path {
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gs-pulse {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: gsPulse 1.5s ease-in-out infinite;
}

@keyframes gsPulse {
    0%, 100% { opacity: 0.5; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Step body */
.gs-step-body {
    flex: 1;
    padding-bottom: 12px;
    min-width: 0;
}

.gs-step:last-child .gs-step-body {
    padding-bottom: 0;
}

.gs-step-label {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 18px;
}

.gs-step-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
    line-height: 1;
}

.gs-step-name {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    line-height: 1;
    transition: all 0.3s ease;
}


.gs-step.pending .gs-step-name {
    color: rgba(255, 255, 255, 0.25);
}

.gs-step.active .gs-step-name {
    color: var(--color-text);
    font-weight: 500;
}

.gs-step.completed .gs-step-name {
    color: var(--color-text-muted);
}

.gs-step-desc {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
    margin: 3px 0 0;
    line-height: 1.35;
    animation: gsDescFade 0.35s ease-out;
}

.gs-step.active .gs-step-desc {
    color: var(--color-text-muted);
}

/* --- Sub-steps --- */
.gs-substeps {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    padding-left: 4px;
    animation: gsSubReveal 0.35s ease-out;
}

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

.gs-substep {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 0;
}

.gs-subdot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.gs-substep.pending .gs-subdot {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
}

.gs-substep.active .gs-subdot {
    border: none;
    background: var(--color-primary);
    box-shadow: 0 0 6px rgba(124, 92, 255, 0.4);
}

.gs-substep.completed .gs-subdot {
    border: none;
    background: var(--color-success);
}

.gs-subcheck {
    width: 7px;
    height: 7px;
}

.gs-subcheck path {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gs-subpulse {
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    animation: gsPulse 1.5s ease-in-out infinite;
}

.gs-substep-icon {
    font-size: 0.72rem;
    flex-shrink: 0;
    line-height: 1;
}

.gs-substep-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.gs-substep-name {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    line-height: 1;
    transition: all 0.3s ease;
}

.gs-substep-desc {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    line-height: 1.3;
    animation: gsDescFade 0.35s ease-out;
}

.gs-substep.pending .gs-substep-name {
    color: rgba(255, 255, 255, 0.2);
}

.gs-substep.active .gs-substep-name {
    color: var(--color-text);
}

.gs-substep.active .gs-substep-desc {
    color: var(--color-text-muted);
}

.gs-substep.completed .gs-substep-name {
    color: var(--color-text-muted);
    opacity: 0.7;
}

.gs-substep.completed .gs-substep-desc {
    color: rgba(255, 255, 255, 0.2);
}

/* Chat Input */
.chat-input-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
}

.chat-input-container .btn-session-manager {
    flex-shrink: 0;
    margin-left: 0;
}

.chat-input {
    display: flex;
    flex: 1;
    gap: 12px;
    align-items: flex-end;
}

.chat-input textarea {
    flex: 1;
    padding: 14px 18px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: 1rem;
    resize: none;
    min-height: 50px;
    max-height: 150px;
    line-height: 1.4;
}

.chat-input textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.chat-input textarea::placeholder {
    color: var(--color-text-muted);
}

.btn-send {
    background: var(--color-primary);
    color: white;
    padding: 0 24px;
    height: 50px;
    border: 1px solid transparent;
    border-radius: 24px;
    font-weight: 600;
    flex-shrink: 0;
}

.btn-send:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

/* Error Messages */
.error-message {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    padding: 16px;
    border-radius: var(--radius);
    margin-top: 20px;
    text-align: center;
}

.error-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: white;
    padding: 12px 24px;
    border-radius: var(--radius);
    cursor: pointer;
    animation: slideUp 0.3s ease;
    z-index: 1000;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* === Markdown Styles === */
.markdown-body {
    font-size: 1rem;
    line-height: 1.7;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
    margin: 16px 0 8px 0;
    font-weight: 600;
    line-height: 1.3;
}

.markdown-body h1 { font-size: 1.5rem; }
.markdown-body h2 { font-size: 1.3rem; }
.markdown-body h3 { font-size: 1.15rem; }
.markdown-body h4 { font-size: 1rem; }

.markdown-body h1:first-child,
.markdown-body h2:first-child,
.markdown-body h3:first-child,
.markdown-body h4:first-child {
    margin-top: 0;
}

.markdown-body p {
    margin: 0 0 12px 0;
}

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

.markdown-body strong {
    font-weight: 700;
    color: var(--color-primary-hover);
}

.chat-message.user .markdown-body strong {
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.markdown-body em {
    font-style: italic;
    opacity: 0.9;
}

.markdown-body ul,
.markdown-body ol {
    margin: 8px 0;
    padding-left: 24px;
}

.markdown-body li {
    margin: 4px 0;
}

.markdown-body blockquote {
    margin: 12px 0;
    padding: 8px 16px;
    border-left: 3px solid var(--color-primary);
    background: rgba(124, 92, 255, 0.1);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
}

.markdown-body blockquote p {
    margin: 0;
}

.markdown-body code {
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.9em;
}

.markdown-body pre {
    background: var(--color-bg-tertiary);
    padding: 12px 16px;
    border-radius: var(--radius);
    overflow-x: auto;
    margin: 12px 0;
}

.markdown-body pre code {
    background: none;
    padding: 0;
}

.markdown-body hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 16px 0;
}

.markdown-body a {
    color: var(--color-primary);
    text-decoration: none;
}

.markdown-body a:hover {
    text-decoration: underline;
}

/* === Settings Page === */
.settings-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    min-height: 100vh;
}

.settings-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.settings-header h1 {
    font-size: 2rem;
    margin: 0;
    color: var(--color-text);
}

.header-top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.btn-settings {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    padding: 10px 16px;
    font-size: 1.2rem;
    border-radius: var(--radius);
}

.btn-settings:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-primary);
}

/* User Menu */
.user-menu {
    position: relative;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    padding: 6px 14px 6px 6px;
    border-radius: 100px;
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.user-menu-trigger:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-primary);
}

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), #5a3fd4);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-chevron {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    transition: transform 0.2s;
}

.user-menu-chevron.open {
    transform: rotate(180deg);
}

.user-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 100;
    padding: 4px;
    animation: userMenuIn 0.15s ease-out;
}

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

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.user-menu-item:hover {
    background: var(--color-bg-tertiary);
}

.user-menu-item-danger:hover {
    background: rgba(255, 107, 107, 0.12);
    color: var(--color-accent);
}

.user-menu-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    color: var(--color-text-muted);
}

.user-menu-item-danger:hover .user-menu-icon {
    color: var(--color-accent);
}

.user-menu-divider {
    height: 1px;
    background: var(--color-border);
    margin: 4px 8px;
}

/* Settings Tabs */
.settings-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
}

.settings-tabs .tab {
    background: transparent;
    color: var(--color-text-muted);
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius) var(--radius) 0 0;
    font-size: 0.95rem;
}

.settings-tabs .tab:hover {
    color: var(--color-text);
    background: var(--color-bg-secondary);
}

.settings-tabs .tab.active {
    background: var(--color-bg-secondary);
    color: var(--color-primary);
    border-color: var(--color-border);
    border-bottom-color: var(--color-bg-secondary);
}

/* Settings Content */
.settings-content {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 30px;
}

.settings-section h2 {
    font-size: 1.4rem;
    margin: 0 0 10px 0;
    color: var(--color-text);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-header h2 {
    margin: 0;
}

.section-description {
    color: var(--color-text-muted);
    margin-bottom: 25px;
    font-size: 0.95rem;
}

/* Beta Keys Table */
.betakeys-table {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.betakeys-header {
    display: grid;
    grid-template-columns: 200px 100px 110px 1fr 100px 80px;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-bg-tertiary);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.betakey-row {
    display: grid;
    grid-template-columns: 200px 100px 110px 1fr 100px 80px;
    gap: 12px;
    padding: 10px 16px;
    background: var(--color-bg-secondary);
    align-items: center;
    font-size: 0.9rem;
    transition: background 0.15s;
}

.betakey-row:hover {
    background: var(--color-bg-tertiary);
}

.betakey-row.betakey-disabled {
    opacity: 0.55;
}

.betakey-code {
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    color: var(--color-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.betakey-row.betakey-disabled .betakey-code {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

.betakey-source {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.betakey-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.betakey-user-name {
    font-weight: 500;
    color: var(--color-text);
}

.betakey-user-email {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.betakey-date {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.betakey-actions {
    display: flex;
    gap: 4px;
}

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-active {
    background: rgba(72, 199, 142, 0.15);
    color: #48c78e;
}

.badge-used {
    background: rgba(108, 117, 125, 0.15);
    color: #8c95a0;
}

.badge-disabled {
    background: rgba(255, 107, 107, 0.15);
    color: var(--color-accent);
}

.badge-expired {
    background: rgba(255, 183, 77, 0.15);
    color: #ffb74d;
}

/* Generate BetaKey Modal */
.generate-betakey-modal {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    width: 440px;
    max-width: 90vw;
    box-shadow: var(--shadow);
    animation: modalIn 0.2s ease-out;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.modal-header-simple {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
}

.modal-header-simple h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--color-text);
}

.btn-close {
    background: transparent;
    border: none;
    font-size: 1.4rem;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.15s;
}

.btn-close:hover {
    color: var(--color-text);
    background: var(--color-bg-tertiary);
}

.modal-body-simple {
    padding: 24px;
}

.modal-body-simple .btn-primary,
.modal-body-simple .btn-secondary {
    width: 100%;
    margin-top: 8px;
}

.generated-code-container {
    display: flex;
    gap: 8px;
    align-items: center;
}

.generated-code-input {
    flex: 1;
    font-family: var(--font-mono, monospace);
    font-size: 1rem;
    letter-spacing: 1px;
    color: var(--color-primary);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 14px;
}

.btn-copy {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 44px;
    text-align: center;
}

.btn-copy:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* Form Elements */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text);
    font-weight: 500;
    font-family: var(--font-ui);
}

.form-group label .char-limit {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-left: 8px;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 1rem;
    font-family: var(--font-main);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-group input[type="range"] {
    width: 100%;
    height: 6px;
    background: var(--color-bg-tertiary);
    border-radius: 3px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.form-hint code {
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.85em;
}

.form-group select {
    width: 100%;
    padding: 12px 16px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 1rem;
    font-family: var(--font-main);
    cursor: pointer;
}

.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-group input[type="password"] {
    width: 100%;
    padding: 12px 16px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 1rem;
    font-family: var(--font-main);
}

.form-group input[type="password"]:focus {
    outline: none;
    border-color: var(--color-primary);
}

.input-with-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.input-with-status input {
    flex: 1;
}

.status-configured {
    background: var(--color-success);
    color: white;
    padding: 4px 10px;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

/* API Key Info Box */
.api-key-info .info-box {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px;
}

.api-key-info .info-box p {
    margin: 0 0 12px 0;
    color: var(--color-text);
}

.api-key-info .code-examples {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.api-key-info .code-example {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.api-key-info .code-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.api-key-info code {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 8px 12px;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-primary);
    overflow-x: auto;
}

.form-group-checkbox {
    padding: 16px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 500;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.checkbox-label span {
    color: var(--color-text);
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.btn-small {
    padding: 8px 16px;
    font-size: 0.9rem;
}

.btn-secondary {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    background: var(--color-bg);
    border-color: var(--color-text-muted);
}

/* World Form */
.world-form {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 25px;
    margin-bottom: 25px;
}

.world-form h3 {
    margin: 0 0 20px 0;
    color: var(--color-primary);
    font-size: 1.1rem;
}

.form-section-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 10px 0;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.form-section-label:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.lore-link-hint {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(100, 150, 255, 0.06);
    border: 1px solid rgba(100, 150, 255, 0.15);
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.lore-link-hint span:first-child {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.lore-link-hint strong {
    color: var(--color-text);
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    padding: 0;
    font-size: 0.85rem;
    text-decoration: underline;
    display: inline;
    font-family: inherit;
}

.btn-link:hover {
    opacity: 0.8;
}

/* Starter items table */
.starter-items-table {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px;
    margin-top: 8px;
}

.starter-items-header {
    display: grid;
    grid-template-columns: 100px 100px 100px 80px 1fr 40px;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.starter-item-row {
    display: grid;
    grid-template-columns: 100px 100px 100px 80px 1fr 40px;
    gap: 8px;
    padding: 6px 4px;
    align-items: center;
}

.starter-item-row:hover {
    background: var(--color-bg-tertiary);
    border-radius: 4px;
}

.starter-item-row select,
.starter-item-row input[type="text"] {
    padding: 6px 8px;
    font-size: 0.85rem;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
}

.starter-item-row select:focus,
.starter-item-row input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
}

.starter-item-row input[type="text"] {
    width: 100%;
}

.starter-items-table > .btn-secondary {
    margin-top: 12px;
}

@media (max-width: 900px) {
    .starter-items-header {
        display: none;
    }
    
    .starter-item-row {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 10px;
        border-bottom: 1px solid var(--color-border);
    }
    
    .starter-item-row input[type="text"] {
        grid-column: 1 / -1;
    }
    
    .starter-item-row button {
        grid-column: 2;
        justify-self: end;
    }
}

/* Worlds List */
.worlds-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.world-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.world-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.world-card .world-name {
    font-weight: 600;
    color: var(--color-text);
}

.world-card .world-tone {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-style: italic;
}

.world-card .world-version {
    color: var(--color-primary);
    font-size: 0.85rem;
    background: rgba(124, 92, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}


.world-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.world-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.world-badge-public {
    background: rgba(99, 179, 237, 0.15);
    color: var(--color-primary);
    border: 1px solid rgba(99, 179, 237, 0.3);
}

.world-badge-other {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.public-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: transparent;
    transition: all 0.2s;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.public-toggle:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-primary);
}

.public-toggle input[type="checkbox"] {
    accent-color: var(--color-primary);
    cursor: pointer;
}

.public-toggle-label {
    user-select: none;
}

.btn-icon {
    background: transparent;
    border: 1px solid var(--color-border);
    padding: 8px 12px;
    font-size: 1rem;
    border-radius: var(--radius);
}

.btn-icon:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-primary);
}

.btn-icon.btn-danger:hover {
    border-color: var(--color-accent);
    background: rgba(255, 107, 107, 0.1);
}

.empty-message {
    text-align: center;
    color: var(--color-text-muted);
    padding: 30px;
    font-style: italic;
}

/* === Game Play Wrapper (with panel) === */
.game-play-wrapper {
    display: flex;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.game-play-wrapper .game-play {
    flex: 1;
    max-width: 900px;
    margin: 0 auto;
    transition: margin-right 0.3s ease;
}

/* === Narrative History Panel === */
.narrative-panel-toggle {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    padding: 16px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
}

.narrative-panel-toggle:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-primary);
}

.narrative-panel-toggle.open {
    right: 360px;
}

.narrative-panel-toggle .toggle-icon {
    font-size: 1.4rem;
}

.narrative-panel {
    position: fixed;
    right: -360px;
    top: 0;
    width: 360px;
    height: 100vh;
    background: var(--color-bg-secondary);
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    z-index: 99;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

.narrative-panel.open {
    right: 0;
}

.narrative-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
}

.narrative-panel-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-text);
    font-family: var(--font-ui);
}

.narrative-panel-header .btn-close {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 4px;
}

.narrative-panel-header .btn-close:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.narrative-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.narrative-panel-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
}

.btn-refresh {
    width: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    padding: 10px;
    border-radius: var(--radius);
    font-size: 0.9rem;
}

.btn-refresh:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-text);
}

/* Panel Loading & Empty States */
.panel-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    color: var(--color-text-muted);
    font-style: italic;
}

.panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--color-text-muted);
}

.panel-empty .empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.panel-empty p {
    margin: 0;
    font-style: italic;
}

/* History Sections */
.history-section {
    margin-bottom: 24px;
}

.history-section h4 {
    font-size: 0.9rem;
    font-family: var(--font-ui);
    color: var(--color-text-muted);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

/* History Items */
.history-item {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.history-item:hover {
    border-color: var(--color-primary);
}

.history-item.compressed {
    opacity: 0.7;
}

.history-item .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.history-item .item-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-family: var(--font-ui);
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.history-item .event-badge {
    background: var(--color-bg);
}

.history-item .event-badge.type-dialogue {
    background: rgba(100, 200, 255, 0.15);
    color: #64c8ff;
}

.history-item .event-badge.type-combat {
    background: rgba(255, 107, 107, 0.15);
    color: var(--color-accent);
}

.history-item .event-badge.type-exploration {
    background: rgba(78, 205, 196, 0.15);
    color: var(--color-success);
}

.history-item .event-badge.type-decision {
    background: rgba(124, 92, 255, 0.15);
    color: var(--color-primary);
}

.history-item .summary-badge {
    background: rgba(124, 92, 255, 0.2);
    color: var(--color-primary-hover);
}

.history-item .item-sequence,
.history-item .item-level {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-family: var(--font-ui);
}

.history-item .item-content {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text);
    margin-bottom: 8px;
}

.history-item .item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-item .item-time {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.history-item .item-compressed-badge {
    font-size: 0.7rem;
    background: rgba(255, 107, 107, 0.15);
    color: var(--color-accent);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Summary levels styling */
.history-item.summary.level-1 {
    border-left: 3px solid var(--color-primary);
}

.history-item.summary.level-2 {
    border-left: 3px solid var(--color-success);
}

.history-item.summary.level-3 {
    border-left: 3px solid var(--color-text-muted);
}

/* Mobile responsiveness for panel */
@media (max-width: 768px) {
    .narrative-panel {
        width: 100%;
        right: -100%;
    }

    .narrative-panel-toggle.open {
        right: calc(100% - 48px);
    }
}

.config-note {
    margin-top: 25px;
    padding: 15px;
    background: rgba(124, 92, 255, 0.1);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Success Message */
.success-message {
    background: rgba(78, 205, 196, 0.1);
    border: 1px solid var(--color-success);
    color: var(--color-success);
    padding: 16px;
    border-radius: var(--radius);
    margin-top: 20px;
    text-align: center;
}

/* === Locations Page === */
.locations-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
    min-height: 100vh;
}

.locations-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.locations-header h1 {
    font-size: 2rem;
    margin: 0;
    color: var(--color-text);
}

.locations-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.filter-group select {
    padding: 8px 12px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 0.9rem;
    min-width: 150px;
}

.filter-group select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Locations Content */
.locations-content {
    display: flex;
    gap: 24px;
}

.locations-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

/* View mode toggle */
.view-toggle {
    display: flex;
    gap: 4px;
    background: var(--color-bg-tertiary);
    border-radius: 6px;
    padding: 2px;
}

.view-btn {
    padding: 6px 12px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.6;
    transition: all 0.15s ease;
}

.view-btn:hover {
    opacity: 1;
}

.view-btn.active {
    background: var(--color-primary);
    opacity: 1;
}

/* Locations Tree View */
.locations-tree {
    flex: 1;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    padding: 12px;
    overflow-y: auto;
}

.tree-node {
    margin-left: calc(var(--depth) * 24px);
}

.tree-node-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.tree-node-content:hover {
    background: var(--color-bg-tertiary);
}

.tree-node-content.selected {
    background: rgba(var(--color-primary-rgb), 0.2);
    border-left: 3px solid var(--color-primary);
}

.tree-expand-btn {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0;
    border-radius: 4px;
}

.tree-expand-btn:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
}

.tree-expand-placeholder {
    width: 20px;
    height: 20px;
}

.location-type-icon {
    font-size: 1.1rem;
}

.tree-node-name {
    flex: 1;
    font-weight: 500;
    color: var(--color-text);
}

.tree-node-type {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    padding: 2px 8px;
    background: var(--color-bg-tertiary);
    border-radius: 4px;
}

.tree-node-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tree-node-content:hover .tree-node-actions {
    opacity: 1;
}

.btn-icon-small {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.15s ease;
}

.btn-icon-small:hover {
    background: var(--color-bg);
}

.btn-icon-small.btn-danger:hover {
    background: rgba(var(--color-danger-rgb), 0.2);
}

.tree-children {
    border-left: 1px dashed var(--color-border);
    margin-left: 10px;
    padding-left: 0;
}

.loading,
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-muted);
}

.empty-state p {
    margin: 8px 0;
}

/* Location Card */
.location-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.location-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.location-card.selected {
    border-color: var(--color-primary);
    background: var(--color-bg-tertiary);
}

.location-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.location-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-family: var(--font-ui);
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
}

.location-type-badge.region { background: rgba(100, 150, 255, 0.15); color: #6496ff; }
.location-type-badge.city { background: rgba(255, 200, 100, 0.15); color: #ffc864; }
.location-type-badge.district { background: rgba(150, 200, 150, 0.15); color: #96c896; }
.location-type-badge.building { background: rgba(200, 150, 100, 0.15); color: #c89664; }
.location-type-badge.room { background: rgba(180, 180, 200, 0.15); color: #b4b4c8; }
.location-type-badge.wilderness { background: rgba(100, 200, 100, 0.15); color: #64c864; }
.location-type-badge.dungeon { background: rgba(255, 100, 100, 0.15); color: #ff6464; }
.location-type-badge.landmark { background: rgba(200, 100, 255, 0.15); color: #c864ff; }

.location-card .location-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.location-card:hover .location-actions {
    opacity: 1;
}

.location-name {
    font-size: 1.1rem;
    margin: 0 0 8px 0;
    color: var(--color-text);
}

.location-description {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.location-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.location-parent,
.location-children,
.location-connections {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Location Details Panel */
.location-details-panel {
    width: 400px;
    flex-shrink: 0;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.details-header h2 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--color-text);
}

.btn-close {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 4px;
}

.btn-close:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
}

.details-section {
    margin-bottom: 20px;
}

.details-section h4 {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0 0 8px 0;
    font-family: var(--font-ui);
}

.details-section p {
    margin: 0;
    line-height: 1.6;
}

.ambiance-text {
    font-style: italic;
    color: var(--color-primary-hover);
}

.child-list,
.connection-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.child-list li,
.connection-list li {
    padding: 8px 12px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.child-list li.clickable,
.connection-list li .clickable {
    cursor: pointer;
}

.child-list li.clickable:hover,
.connection-list li .clickable:hover {
    color: var(--color-primary);
}

.connection-type {
    font-size: 1rem;
}

.connection-direction {
    margin-left: auto;
    font-size: 0.9rem;
}

.connection-hidden {
    opacity: 0.5;
}

/* === Modal Styles === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
    padding: 24px;
}

.modal {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    border-radius: 12px 12px 0 0;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-text);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    border-radius: 0 0 12px 12px;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-row .form-group {
    flex: 1;
}

.form-row.checkboxes {
    gap: 24px;
}

.form-row.checkboxes .form-group {
    flex: none;
}

/* Location & Connection Editor specific */
.location-editor .form-group select,
.connection-editor .form-group select {
    width: 100%;
    padding: 12px 16px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 1rem;
}

.location-editor .form-group select:focus,
.connection-editor .form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Responsive */
@media (max-width: 1200px) {
    .locations-content {
        flex-direction: column;
    }
    
    .location-details-panel {
        width: 100%;
        position: static;
        max-height: none;
    }
}

@media (max-width: 768px) {
    .locations-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group label {
        margin-bottom: 4px;
    }
    
    .locations-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        flex-direction: column;
    }
}

/* === Locations Tabs === */
.domain-tabs,
.locations-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-border);
}

.domain-tabs .tab,
.locations-tabs .tab {
    padding: 12px 24px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--color-text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -2px;
    font-family: var(--font-ui);
}

.domain-tabs .tab:hover,
.locations-tabs .tab:hover {
    color: var(--color-text);
    background: var(--color-bg-secondary);
}

.domain-tabs .tab.active,
.locations-tabs .tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: var(--color-bg-secondary);
}

/* === Session Locations === */
.sessions-content {
    padding: 20px 0;
}

.session-group {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.session-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border);
}

.session-group-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-text);
}

.session-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 600;
}

.session-status.active {
    background: #22c55e33;
    color: #22c55e;
}

.session-status.completed {
    background: #6366f133;
    color: #6366f1;
}

.session-status.abandoned {
    background: #64748b33;
    color: #64748b;
}

.session-locations-list {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.session-location-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    gap: 16px;
}

.session-location-card .location-info {
    flex: 1;
}

.session-location-card h4 {
    margin: 8px 0 4px;
    font-size: 1.1rem;
    color: var(--color-text);
}

.session-location-card p {
    margin: 0 0 8px;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.session-location-card .ambiance-text {
    font-style: italic;
    color: var(--color-text-muted);
}

.session-location-card .location-date {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.session-location-card .location-parent-info {
    display: block;
    font-size: 0.85rem;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.session-location-card .location-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
}

.btn-small {
    padding: 6px 12px;
    font-size: 0.85rem;
}

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

.empty-state p {
    margin: 8px 0;
}

/* === Session Items Page === */
.items-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.items-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.items-header h1 {
    margin: 0;
    font-size: 1.8rem;
}

.items-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.items-content {
    min-height: 300px;
}

.session-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 16px;
}

.session-item-card {
    background: var(--color-bg-primary);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    transition: border-color 0.15s ease;
}

.session-item-card.rarity-common { border-color: #9ca3af; }
.session-item-card.rarity-uncommon { border-color: #22c55e; }
.session-item-card.rarity-rare { border-color: #3b82f6; }
.session-item-card.rarity-epic { border-color: #a855f7; }
.session-item-card.rarity-legendary { border-color: #f97316; }
.session-item-card.rarity-mythic { border-color: #ef4444; }

.session-item-card .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.session-item-card .item-category-badge {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.session-item-card .item-rarity-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.item-rarity-badge.rarity-common { background: #9ca3af33; color: #9ca3af; }
.item-rarity-badge.rarity-uncommon { background: #22c55e33; color: #22c55e; }
.item-rarity-badge.rarity-rare { background: #3b82f633; color: #3b82f6; }
.item-rarity-badge.rarity-epic { background: #a855f733; color: #a855f7; }
.item-rarity-badge.rarity-legendary { background: #f9731633; color: #f97316; }
.item-rarity-badge.rarity-mythic { background: #ef444433; color: #ef4444; }

.session-item-card h4 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: var(--color-text);
}

.session-item-card .item-description {
    margin: 0 0 8px;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.session-item-card .item-effect {
    margin: 0 0 8px;
    font-size: 0.85rem;
    color: var(--color-primary);
    font-style: italic;
}

.session-item-card .item-status {
    margin-bottom: 8px;
}

.session-item-card .status-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
}

.status-badge.equipped {
    background: #22c55e33;
    color: #22c55e;
}

.status-badge.inventory {
    background: #3b82f633;
    color: #3b82f6;
}

.status-badge.world {
    background: #f9731633;
    color: #f97316;
}

.session-item-card .item-date {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* === Session Manager Button === */
.btn-session-manager {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
}

.btn-session-manager:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-primary);
}

/* === Session Manager Modal === */
.session-manager-modal {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    width: 90%;
    max-width: 800px;
    height: 80vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

.session-manager-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    border-radius: 16px 16px 0 0;
}

.session-manager-modal .modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--color-text);
}

.session-manager-modal .modal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    padding: 0 16px;
    background: var(--color-bg-tertiary);
}

.session-manager-modal .tab {
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--color-text-secondary);
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -2px;
    white-space: nowrap;
}

.session-manager-modal .tab:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.05);
}

.session-manager-modal .tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.session-manager-modal .modal-content {
    flex: 1;
    overflow: hidden;
    padding: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.session-manager-modal .tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.session-manager-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    border-radius: 0 0 16px 16px;
}

/* History content in modal */
.history-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.history-section h4 {
    margin: 0 0 12px;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.history-item {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
}

.history-item .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.history-item .item-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.history-item .item-badge.type-dialogue { background: #3b82f633; color: #60a5fa; }
.history-item .item-badge.type-combat { background: #ef444433; color: #f87171; }
.history-item .item-badge.type-exploration { background: #22c55e33; color: #4ade80; }
.history-item .item-badge.type-decision { background: #f59e0b33; color: #fbbf24; }

.history-item .item-content {
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.5;
}

.history-item .item-time {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 8px;
}

/* Locations content in modal */
.locations-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.locations-content .location-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    transition: all 0.2s ease;
}

.locations-content .location-card.editing {
    border-color: var(--color-primary);
}

.locations-content .location-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.locations-content .location-header h4 {
    margin: 0;
    flex: 1;
    font-size: 1rem;
    color: var(--color-text);
}

.locations-content .location-description {
    margin: 0 0 8px;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.locations-content .location-ambiance {
    margin: 0;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.85rem;
}

.locations-content .location-edit-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.locations-content .location-edit-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.locations-content .location-edit-form label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.locations-content .location-edit-form input,
.locations-content .location-edit-form select,
.locations-content .location-edit-form textarea {
    padding: 8px 12px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-size: 0.9rem;
}

.locations-content .location-edit-form textarea {
    resize: vertical;
    font-family: inherit;
}

.locations-content .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.btn-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.btn-icon:hover {
    opacity: 1;
}

/* Toast notifications */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    z-index: 2000;
    cursor: pointer;
    animation: slideUp 0.3s ease;
}

.toast.success {
    background: #22c55e;
    color: white;
}

.toast.error {
    background: #ef4444;
    color: white;
}

.hint {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Items content in modal */
.items-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.session-item-card-sm {
    background: var(--color-bg-primary);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    padding: 14px 16px;
    transition: all 0.2s ease;
}

.session-item-card-sm.rarity-common { border-color: #9ca3af; }
.session-item-card-sm.rarity-uncommon { border-color: #22c55e; }
.session-item-card-sm.rarity-rare { border-color: #3b82f6; }
.session-item-card-sm.rarity-epic { border-color: #a855f7; }
.session-item-card-sm.rarity-legendary { border-color: #f97316; }
.session-item-card-sm.rarity-mythic { border-color: #ef4444; }

.session-item-card-sm .item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.session-item-card-sm .item-category {
    font-size: 1.2rem;
}

.session-item-card-sm h4 {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    color: var(--color-text);
}

.session-item-card-sm .item-description {
    margin: 0 0 8px;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.session-item-card-sm .item-effect {
    margin: 0 0 8px;
    font-size: 0.85rem;
    color: var(--color-primary);
    font-style: italic;
}

.session-item-card-sm .item-footer {
    display: flex;
    gap: 8px;
}

.session-item-card-sm .status-tag {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
}

.session-item-card-sm .status-tag.equipped {
    background: #22c55e33;
    color: #22c55e;
}

.session-item-card-sm .status-tag.inventory {
    background: #3b82f633;
    color: #3b82f6;
}

.session-item-card-sm .status-tag.world {
    background: #f9731633;
    color: #f97316;
}

.session-item-card-sm .item-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.session-item-card-sm .item-header h4 {
    flex: 1;
}

.session-item-card-sm .btn-icon-sm {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.6;
    transition: all 0.15s ease;
}

.session-item-card-sm .btn-icon-sm:hover {
    opacity: 1;
    background: var(--color-bg);
}

.add-item-section {
    margin-top: 16px;
    text-align: center;
}

.item-edit-form {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
}

.item-edit-form h4 {
    margin: 0 0 16px;
    color: var(--color-text);
}

.item-edit-form .form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.item-edit-form .form-group {
    flex: 1;
}

.item-edit-form .form-group label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.item-edit-form .form-group input,
.item-edit-form .form-group select,
.item-edit-form .form-group textarea {
    width: 100%;
    padding: 8px 12px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-size: 0.9rem;
}

.item-edit-form .form-group textarea {
    resize: vertical;
    min-height: 60px;
}

.item-edit-form .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

/* === Session NPC Cards === */
.npcs-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.session-npc-card {
    background: var(--color-bg-primary);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    padding: 14px 16px;
    transition: all 0.2s ease;
}

.session-npc-card.importance-minor { border-color: #9ca3af; }
.session-npc-card.importance-supporting { border-color: #22c55e; }
.session-npc-card.importance-major { border-color: #a855f7; }
.session-npc-card.importance-legendary { border-color: #f97316; }

.session-npc-card .npc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.session-npc-card .npc-role {
    font-size: 1.2rem;
}

.session-npc-card h4 {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    color: var(--color-text);
}

.session-npc-card .disposition-badge {
    font-size: 1rem;
}

.session-npc-card .importance-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.importance-badge.importance-minor { background: #9ca3af33; color: #9ca3af; }
.importance-badge.importance-supporting { background: #22c55e33; color: #22c55e; }
.importance-badge.importance-major { background: #a855f733; color: #a855f7; }
.importance-badge.importance-legendary { background: #f9731633; color: #f97316; }

.session-npc-card .npc-background {
    margin: 0 0 8px;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.session-npc-card .npc-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.session-npc-card .status-tag {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
}

.session-npc-card .status-tag.status-alive { background: #22c55e33; color: #22c55e; }
.session-npc-card .status-tag.status-dead { background: #ef444433; color: #ef4444; }
.session-npc-card .status-tag.status-missing { background: #f59e0b33; color: #f59e0b; }
.session-npc-card .status-tag.status-unconscious { background: #6366f133; color: #6366f1; }
.session-npc-card .status-tag.status-imprisoned { background: #78716c33; color: #78716c; }
.session-npc-card .status-tag.status-unknown { background: #64748b33; color: #64748b; }

.session-npc-card .location-tag {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.session-npc-card .encounter-count {
    font-size: 0.75rem;
    color: var(--color-primary);
    margin-left: auto;
}

.session-npc-card .btn-icon-sm {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.6;
    transition: all 0.15s ease;
}

.session-npc-card .btn-icon-sm:hover {
    opacity: 1;
    background: var(--color-bg);
}

.add-npc-section {
    margin-top: 16px;
    text-align: center;
}

.npc-edit-form {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
}

.npc-edit-form h4 {
    margin: 0 0 16px;
    color: var(--color-text);
}

.npc-edit-form .form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.npc-edit-form .form-group {
    flex: 1;
}

.npc-edit-form .form-group label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.npc-edit-form .form-group input,
.npc-edit-form .form-group select,
.npc-edit-form .form-group textarea {
    width: 100%;
    padding: 8px 12px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-size: 0.9rem;
}

.npc-edit-form .form-group textarea {
    resize: vertical;
    min-height: 60px;
}

.npc-edit-form .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

/* Session Ability Cards */
.abilities-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.session-ability-card {
    background: var(--color-bg-primary);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    padding: 14px 16px;
    transition: all 0.2s ease;
}

.session-ability-card.learning {
    opacity: 0.75;
    border-style: dashed;
}

.session-ability-card.power-1,
.session-ability-card.power-2 { border-left: 4px solid #666; }
.session-ability-card.power-3,
.session-ability-card.power-4 { border-left: 4px solid #22c55e; }
.session-ability-card.power-5,
.session-ability-card.power-6 { border-left: 4px solid #3b82f6; }
.session-ability-card.power-7,
.session-ability-card.power-8 { border-left: 4px solid #a855f7; }
.session-ability-card.power-9,
.session-ability-card.power-10 { border-left: 4px solid #ffd700; }

.session-ability-card .ability-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.session-ability-card .ability-type {
    font-size: 1.2rem;
}

.session-ability-card h4 {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    color: var(--color-text);
}

.session-ability-card .power-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--color-bg-secondary);
}

.session-ability-card .power-badge.power-low { color: #888; }
.session-ability-card .power-badge.power-medium { color: #22c55e; }
.session-ability-card .power-badge.power-high { color: #3b82f6; }
.session-ability-card .power-badge.power-very-high { color: #a855f7; }
.session-ability-card .power-badge.power-legendary { color: #ffd700; text-shadow: 0 0 4px rgba(255, 215, 0, 0.5); }

.session-ability-card .learning-badge {
    opacity: 0.8;
}

.session-ability-card .ability-effect {
    margin: 0 0 10px;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.session-ability-card .ability-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.session-ability-card .meta-tag {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--color-bg-secondary);
    color: var(--color-text-muted);
}

.session-ability-card .meta-tag.cost {
    color: #ef4444;
}

.session-ability-card .btn-icon-sm {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.6;
    transition: all 0.15s ease;
}

.session-ability-card .btn-icon-sm:hover {
    opacity: 1;
    background: var(--color-bg);
}

.add-ability-section {
    margin-top: 16px;
    text-align: center;
}

.ability-edit-form {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
}

.ability-edit-form h4 {
    margin: 0 0 16px;
    color: var(--color-text);
}

.ability-edit-form .form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.ability-edit-form .form-group {
    flex: 1;
}

.ability-edit-form .form-group label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.ability-edit-form .form-group input,
.ability-edit-form .form-group select,
.ability-edit-form .form-group textarea {
    width: 100%;
    padding: 8px 12px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-size: 0.9rem;
}

.ability-edit-form .form-group input[type="number"] {
    width: 80px;
}

.ability-edit-form .form-group textarea {
    resize: vertical;
    min-height: 60px;
}

.ability-edit-form .checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 24px;
}

.ability-edit-form .checkbox-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-bottom: 0;
}

.ability-edit-form .checkbox-group input[type="checkbox"] {
    width: auto;
}

.ability-edit-form .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

/* Connections content in modal */
.connections-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.connection-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all 0.2s ease;
}

.connection-card.editing {
    flex-direction: column;
    border-color: var(--color-primary);
}

.connection-card .connection-info {
    flex: 1;
}

.connection-card .connection-path {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    margin-bottom: 8px;
}

.connection-card .location-name {
    color: var(--color-primary);
}

.connection-card .connection-arrow {
    color: var(--color-text-muted);
}

.connection-card .connection-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.connection-card .connection-type-badge {
    background: var(--color-bg-tertiary);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
}

.connection-card .badge {
    background: var(--color-bg-secondary);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.connection-card .badge.hidden {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.connection-card .connection-description {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-style: italic;
}

.connection-edit-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.connection-edit-form .form-row {
    display: flex;
    gap: 16px;
}

.connection-edit-form .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.connection-edit-form .checkbox-group {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
}

.connection-edit-form .checkbox-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.connection-edit-form label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.connection-edit-form input[type="text"],
.connection-edit-form select {
    padding: 8px 12px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-size: 0.9rem;
}

.connection-edit-form input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
}

.connection-edit-form .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.btn-danger {
    background: #ef4444;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    margin-right: auto;
}

.btn-danger:hover {
    background: #dc2626;
}

/* Add connection section */
.add-connection-section {
    margin-top: 16px;
    text-align: center;
}

.add-connection-form {
    background: var(--color-bg-primary);
    border: 2px dashed var(--color-border);
    border-radius: 8px;
    padding: 20px;
    margin-top: 16px;
}

.add-connection-form h4 {
    margin: 0 0 16px;
    color: var(--color-text);
}

.add-connection-form .form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.add-connection-form .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.add-connection-form .checkbox-group {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
}

.add-connection-form label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.add-connection-form select {
    padding: 8px 12px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-size: 0.9rem;
}

.add-connection-form .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* ============================================
   KNOWLEDGE REGISTRY MODAL
   ============================================ */

.knowledge-registry-modal {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    width: 90%;
    max-width: 800px;
    height: 80vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

.knowledge-registry-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    border-radius: 16px 16px 0 0;
}

.knowledge-registry-modal .modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--color-text);
}

.knowledge-registry-modal .modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    padding: 0 24px;
    background: var(--color-bg-tertiary);
}

.knowledge-registry-modal .tab {
    padding: 14px 24px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -2px;
}

.knowledge-registry-modal .tab:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.05);
}

.knowledge-registry-modal .tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.knowledge-registry-modal .modal-content {
    flex: 1;
    overflow: hidden;
    padding: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.knowledge-registry-modal .tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.knowledge-registry-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    border-radius: 0 0 16px 16px;
}

/* Knowledge List */
.knowledge-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.knowledge-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 14px 16px;
    transition: all 0.2s ease;
}

.knowledge-card:hover {
    border-color: var(--color-primary);
    background: rgba(124, 92, 255, 0.05);
}

.knowledge-card.location { border-left: 3px solid #3b82f6; }
.knowledge-card.npc { border-left: 3px solid #22c55e; }
.knowledge-card.item { border-left: 3px solid #f59e0b; }
.knowledge-card.ability { border-left: 3px solid #a855f7; }

.knowledge-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.knowledge-icon {
    font-size: 1.2rem;
    min-width: 24px;
    text-align: center;
}

.knowledge-title {
    flex: 1;
    min-width: 0;
}

.knowledge-title h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.knowledge-title .knowledge-type {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.knowledge-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.knowledge-tag {
    font-size: 0.7rem;
    padding: 2px 8px;
    background: var(--color-bg-tertiary);
    border-radius: 12px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.knowledge-tag:first-child {
    background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.15);
    color: var(--color-primary);
}

.knowledge-description {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Clickable knowledge cards */
.knowledge-card.clickable {
    cursor: pointer;
}

.knowledge-card.clickable:hover {
    border-color: var(--color-primary);
    background: rgba(124, 92, 255, 0.08);
    transform: translateX(4px);
}

.knowledge-card.clickable::after {
    content: "→";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    color: var(--color-primary);
    font-size: 1.2rem;
    transition: opacity 0.2s ease;
}

.knowledge-card.clickable:hover::after {
    opacity: 1;
}

.knowledge-card {
    position: relative;
}

/* Knowledge Detail Modal */
.knowledge-detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    animation: fadeIn 0.2s ease;
}

.knowledge-detail-modal {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
    overflow: hidden;
}

.knowledge-detail-modal.location { border-top: 4px solid #3b82f6; }
.knowledge-detail-modal.npc { border-top: 4px solid #22c55e; }
.knowledge-detail-modal.item { border-top: 4px solid #f59e0b; }
.knowledge-detail-modal.ability { border-top: 4px solid #a855f7; }

.detail-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border);
}

.detail-header .detail-icon {
    flex-shrink: 0;
}

.detail-header .detail-title {
    flex: 1;
    min-width: 0;
}

.detail-header .knowledge-tags {
    flex-basis: 100%;
    gap: 6px;
    order: 10;
}

.detail-icon {
    font-size: 2rem;
    min-width: 48px;
    text-align: center;
}

.detail-title {
    flex: 1;
    min-width: 0;
}

.detail-title h3 {
    margin: 0 0 4px 0;
    font-size: 1.3rem;
    color: var(--color-text);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.detail-title .detail-type {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-header .knowledge-tag {
    font-size: 0.8rem;
    padding: 4px 12px;
    border-radius: 16px;
}

.detail-header .btn-close {
    width: 32px;
    height: 32px;
    margin-left: auto;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.detail-header .btn-close:hover {
    background: var(--color-bg-primary);
    color: var(--color-text);
}

.detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.detail-line {
    margin: 0 0 8px;
    line-height: 1.6;
    color: var(--color-text);
}

.detail-line.title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

.detail-line.indent {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    padding-left: 8px;
    border-left: 2px solid var(--color-border);
}

.detail-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
}

/* ============================================
   LEFT SIDEBAR - Action buttons
   ============================================ */

.game-sidebar-left {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    z-index: 100;
}

.sidebar-btn {
    width: 48px;
    height: 48px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-secondary);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sidebar-btn:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-primary);
    transform: scale(1.05);
}

.sidebar-btn:active {
    transform: scale(0.95);
}

.post-processing-indicator {
    display: flex;
    align-items: center;
    min-height: 8px;
    margin: -8px 0 0 0;
}

.post-processing-indicator .processing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.post-processing-indicator.active .processing-dot {
    opacity: 1;
    transform: scale(1);
    animation: processingPulse 1.8s ease-in-out infinite;
}

@keyframes processingPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}

/* Adjust game-play-wrapper to accommodate sidebar */
.game-play-wrapper {
    padding-left: 64px;
}

/* ============================================
   JOURNAL MODAL
   ============================================ */

.journal-modal {
    background: var(--color-bg-secondary);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.journal-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.journal-modal .modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-text);
}

.journal-modal .modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    min-height: 300px;
}

.journal-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
}

/* Journal content */
.journal-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.journal-section h4 {
    margin: 0 0 12px;
    color: var(--color-text);
    font-size: 1rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 8px;
}

.journal-item {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
}

.journal-item.summary {
    border-left: 3px solid var(--color-primary);
}

.journal-item .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.journal-item .item-badge {
    background: var(--color-bg-tertiary);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.journal-item .item-badge.type-dialogue { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.journal-item .item-badge.type-combat { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.journal-item .item-badge.type-exploration { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.journal-item .item-badge.type-decision { background: rgba(168, 85, 247, 0.2); color: #c084fc; }

.journal-item .item-sequence {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.journal-item .item-content {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.journal-item .item-time {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 8px;
    text-align: right;
}

/* ============================================
   INVENTORY MODAL
   ============================================ */

.inventory-modal {
    background: var(--color-bg-secondary);
    border-radius: 12px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.inventory-modal.inventory-modal-wide {
    max-width: 900px;
}

.inventory-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.inventory-modal .modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-text);
}

.inventory-modal .modal-header .header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.inventory-modal .modal-header .currency-container {
    position: relative;
}

.inventory-modal .modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    min-height: 300px;
}

.inventory-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
}

/* Inventory content */
.inventory-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Compact inventory layout - side by side */
.inventory-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    min-height: 300px;
}

.equipment-panel,
.inventory-panel {
    display: flex;
    flex-direction: column;
}

.equipment-panel h4,
.inventory-panel h4 {
    margin: 0 0 12px;
    color: var(--color-text);
    font-size: 0.95rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 8px;
}

/* Compact equipment grid */
.equipment-compact-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 350px;
    overflow-y: auto;
}

.equip-slot-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--color-bg-primary);
    border: 2px dashed var(--color-border);
    border-radius: 6px;
    min-height: 36px;
    cursor: default;
    transition: all 0.15s ease;
}

.equip-slot-compact.filled {
    border-style: solid;
}

.equip-slot-compact.empty {
    opacity: 0.5;
}

.equip-slot-compact:hover {
    opacity: 1;
}

.slot-icon-compact {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.slot-label-compact {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.slot-item-compact {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.item-name-compact {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    word-break: break-word;
    line-height: 1.2;
}

.wear-icon-compact {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.btn-unequip-compact {
    padding: 4px 8px;
    font-size: 0.75rem;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.btn-unequip-compact:hover:not(:disabled) {
    background: rgba(255, 100, 100, 0.1);
    border-color: #ff6b6b;
    color: #ff6b6b;
}

.btn-unequip-compact:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Inventory list (right panel) */
.inventory-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 350px;
    overflow-y: auto;
}

.inv-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-bg-primary);
    border: 2px solid var(--color-border);
    border-radius: 6px;
    transition: all 0.15s ease;
}

/* Rarity borders for inventory items */
.inv-item-row.rarity-common { border-color: #9ca3af; }
.inv-item-row.rarity-uncommon { border-color: #22c55e; }
.inv-item-row.rarity-rare { border-color: #3b82f6; }
.inv-item-row.rarity-epic { border-color: #a855f7; }
.inv-item-row.rarity-legendary { border-color: #f97316; }
.inv-item-row.rarity-mythic { border-color: #ef4444; }

/* Rarity borders for equipment slots */
.equip-slot-compact.rarity-common { border-color: #9ca3af; }
.equip-slot-compact.rarity-uncommon { border-color: #22c55e; }
.equip-slot-compact.rarity-rare { border-color: #3b82f6; }
.equip-slot-compact.rarity-epic { border-color: #a855f7; }
.equip-slot-compact.rarity-legendary { border-color: #f97316; }
.equip-slot-compact.rarity-mythic { border-color: #ef4444; }

.inv-item-row:hover {
    background: var(--color-bg-tertiary);
}

.inv-item-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.inv-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inv-item-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-item-qty {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-left: 4px;
}

.inv-item-meta {
    display: flex;
    gap: 8px;
    align-items: center;
}

.rarity-badge {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 500;
}

.rarity-badge.rarity-common { color: #6b7280; }
.rarity-badge.rarity-uncommon { color: #22c55e; }
.rarity-badge.rarity-rare { color: #3b82f6; }
.rarity-badge.rarity-epic { color: #a855f7; }
.rarity-badge.rarity-legendary { color: #f97316; }
.rarity-badge.rarity-mythic { color: #ef4444; }

.wear-badge {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.inv-item-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.equip-slot-select-compact {
    padding: 4px 6px;
    font-size: 0.75rem;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
    cursor: pointer;
    max-width: 80px;
}

.btn-equip-compact {
    padding: 4px 10px;
    font-size: 0.75rem;
    background: var(--color-primary);
    border: none;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s ease;
}

.btn-equip-compact:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

.btn-equip-compact:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.inventory-empty-compact {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Equipment slot with proper layout */
.equip-slot-compact {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.equip-slot-compact .item-name-compact {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equip-slot-compact .slot-right-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Wear indicator - subtle text label */
.wear-indicator {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 500;
    background: var(--color-bg-tertiary);
}

.wear-indicator.wear-worn {
    color: #a3a3a3;
}

.wear-indicator.wear-damaged {
    color: #d97706;
}

.wear-indicator.wear-broken {
    color: #dc2626;
}

/* Unequip button as text */
.btn-unequip-text {
    padding: 4px 10px;
    font-size: 0.75rem;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-unequip-text:hover:not(:disabled) {
    background: rgba(255, 100, 100, 0.1);
    border-color: #dc2626;
    color: #dc2626;
}

.btn-unequip-text:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Inventory row layout */
.inv-item-row {
    position: relative;
}

.inv-item-row .inv-item-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Discard button - small trash icon to remove items */
.btn-discard {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    opacity: 0.4;
}

.btn-discard:hover:not(:disabled) {
    opacity: 1;
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
}

.btn-discard:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Confirmation modal for discarding items */
.confirm-modal {
    background: var(--color-bg-secondary);
    border-radius: 12px;
    padding: 24px;
    max-width: 360px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.2s ease;
}

.confirm-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.confirm-header .confirm-icon {
    font-size: 1.5rem;
}

.confirm-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-text);
}

.confirm-content {
    margin-bottom: 20px;
}

.confirm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 12px;
}

.confirm-item.rarity-common { border-color: #9ca3af; }
.confirm-item.rarity-uncommon { border-color: #22c55e; }
.confirm-item.rarity-rare { border-color: #3b82f6; }
.confirm-item.rarity-epic { border-color: #a855f7; }
.confirm-item.rarity-legendary { border-color: #f97316; }
.confirm-item.rarity-mythic { border-color: #ef4444; }

.confirm-item-icon {
    font-size: 1.2rem;
}

.confirm-item-name {
    font-weight: 500;
    color: var(--color-text);
}

.confirm-item-qty {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.confirm-warning {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-danger {
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    background: #dc2626;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-danger:hover:not(:disabled) {
    background: #b91c1c;
}

.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tooltip that appears ABOVE the item on hover (fallback) */
.item-tooltip-above {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 8px;
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    animation: tooltipSlideUp 0.15s ease;
}

/* Fixed tooltip that follows the mouse - rendered outside modal */
.item-tooltip-fixed {
    position: fixed;
    width: 280px;
    max-width: 90vw;
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
    z-index: 100000;
    animation: tooltipFadeIn 0.1s ease;
    pointer-events: none;
}

/* Rarity borders for fixed tooltips */
.item-tooltip-fixed.rarity-common { border-color: #9ca3af; }
.item-tooltip-fixed.rarity-uncommon { border-color: #22c55e; }
.item-tooltip-fixed.rarity-rare { border-color: #3b82f6; }
.item-tooltip-fixed.rarity-epic { border-color: #a855f7; }
.item-tooltip-fixed.rarity-legendary { border-color: #f97316; }
.item-tooltip-fixed.rarity-mythic { border-color: #ef4444; }

.item-tooltip-fixed .tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.item-tooltip-fixed .tooltip-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
}

.item-tooltip-fixed .tooltip-rarity {
    font-size: 0.75rem;
    font-weight: 600;
}

.item-tooltip-fixed .tooltip-rarity.rarity-mythic { color: #ff3333; }
.item-tooltip-fixed .tooltip-rarity.rarity-legendary { color: #ff9500; }
.item-tooltip-fixed .tooltip-rarity.rarity-epic { color: #a855f7; }
.item-tooltip-fixed .tooltip-rarity.rarity-rare { color: #3b82f6; }
.item-tooltip-fixed .tooltip-rarity.rarity-uncommon { color: #22c55e; }
.item-tooltip-fixed .tooltip-rarity.rarity-common { color: #6b7280; }

.item-tooltip-fixed .tooltip-meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.item-tooltip-fixed .tooltip-description {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 6px;
}

.item-tooltip-fixed .tooltip-special {
    font-size: 0.85rem;
    color: var(--color-primary);
    font-style: italic;
    padding-top: 6px;
    border-top: 1px dashed var(--color-border);
}

.item-tooltip-fixed .tooltip-acquisition {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    padding-top: 8px;
    margin-top: 6px;
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 6px;
}

.item-tooltip-fixed .tooltip-acquisition .acquisition-icon {
    font-size: 1rem;
}

.item-tooltip-fixed .tooltip-acquisition .acquisition-text {
    flex: 1;
    line-height: 1.3;
}

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

/* Rarity borders for tooltips */
.item-tooltip-above.rarity-common { border-color: #9ca3af; }
.item-tooltip-above.rarity-uncommon { border-color: #22c55e; }
.item-tooltip-above.rarity-rare { border-color: #3b82f6; }
.item-tooltip-above.rarity-epic { border-color: #a855f7; }
.item-tooltip-above.rarity-legendary { border-color: #f97316; }
.item-tooltip-above.rarity-mythic { border-color: #ef4444; }

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

.item-tooltip-above .tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.item-tooltip-above .tooltip-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
}

.item-tooltip-above .tooltip-rarity {
    font-size: 0.75rem;
    font-weight: 600;
}

.item-tooltip-above .tooltip-rarity.rarity-mythic { color: #ff3333; }
.item-tooltip-above .tooltip-rarity.rarity-legendary { color: #ff9500; }
.item-tooltip-above .tooltip-rarity.rarity-epic { color: #a855f7; }
.item-tooltip-above .tooltip-rarity.rarity-rare { color: #3b82f6; }
.item-tooltip-above .tooltip-rarity.rarity-uncommon { color: #22c55e; }
.item-tooltip-above .tooltip-rarity.rarity-common { color: #6b7280; }

.item-tooltip-above .tooltip-meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.item-tooltip-above .tooltip-description {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 6px;
}

.item-tooltip-above .tooltip-special {
    font-size: 0.85rem;
    color: var(--color-primary);
    font-style: italic;
    padding-top: 6px;
    border-top: 1px dashed var(--color-border);
}

.item-tooltip-above .tooltip-acquisition {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    padding-top: 8px;
    margin-top: 6px;
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 6px;
}

.item-tooltip-above .tooltip-acquisition .acquisition-icon {
    font-size: 1rem;
}

.item-tooltip-above .tooltip-acquisition .acquisition-text {
    flex: 1;
    line-height: 1.3;
}

/* Responsive: stack on small screens */
@media (max-width: 700px) {
    .inventory-layout {
        grid-template-columns: 1fr;
    }
    
    .inventory-list,
    .equipment-compact-grid {
        max-height: 250px;
    }
}

.inventory-section h4 {
    margin: 0 0 12px;
    color: var(--color-text);
    font-size: 1rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 8px;
}

/* Equipment slots grid - shows all slots */
.equipment-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

/* Individual equipment slot */
.equipment-slot {
    background: var(--color-bg-primary);
    border: 2px dashed var(--color-border);
    border-radius: 8px;
    padding: 12px;
    min-height: 100px;
    transition: all 0.2s ease;
}

.equipment-slot.filled {
    border-style: solid;
}

.equipment-slot.empty {
    opacity: 0.6;
}

.equipment-slot .slot-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}

.equipment-slot .slot-icon {
    font-size: 1.2rem;
}

.equipment-slot .slot-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.equipment-slot .slot-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
}

.equipment-slot .slot-empty .empty-text {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.9rem;
}

.equipment-slot .slot-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.equipment-slot .item-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.equipment-slot .item-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
}

.equipment-slot .item-description {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.3;
}

.equipment-slot .item-special {
    font-size: 0.8rem;
    color: var(--color-primary);
    font-style: italic;
}

.equipment-slot .item-meta {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.btn-unequip {
    margin-top: 8px;
    padding: 6px 12px;
    font-size: 0.8rem;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-unequip:hover:not(:disabled) {
    background: var(--color-bg);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn-unequip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Inventory empty state */
.inventory-empty {
    text-align: center;
    padding: 30px 20px;
    background: var(--color-bg-primary);
    border: 1px dashed var(--color-border);
    border-radius: 8px;
}

.inventory-empty .empty-text {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Inventory grids */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

/* Item cards with rarity borders */
.item-card {
    background: var(--color-bg-primary);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 16px;
    transition: all 0.2s ease;
}

.item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Rarity border colors - from most rare to least */
.item-card.rarity-mythic {
    border-color: #ff3333;
    background: linear-gradient(135deg, var(--color-bg-primary), rgba(255, 51, 51, 0.1));
    box-shadow: 0 0 10px rgba(255, 51, 51, 0.3);
}

.item-card.rarity-legendary {
    border-color: #ff8c00;
    background: linear-gradient(135deg, var(--color-bg-primary), rgba(255, 140, 0, 0.1));
    box-shadow: 0 0 8px rgba(255, 140, 0, 0.25);
}

.item-card.rarity-epic {
    border-color: #ffd700;
    background: linear-gradient(135deg, var(--color-bg-primary), rgba(255, 215, 0, 0.1));
}

.item-card.rarity-rare {
    border-color: #4da6ff;
    background: linear-gradient(135deg, var(--color-bg-primary), rgba(77, 166, 255, 0.08));
}

.item-card.rarity-uncommon {
    border-color: #4ade80;
    background: linear-gradient(135deg, var(--color-bg-primary), rgba(74, 222, 128, 0.05));
}

.item-card.rarity-common {
    border-color: #6b7280;
}

/* Item card header */
.item-card .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.item-card .item-slot {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.item-card .item-category-badge {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Rarity badge colors */
.item-rarity {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.item-rarity.rarity-mythic {
    background: rgba(255, 51, 51, 0.2);
    color: #ff3333;
}

.item-rarity.rarity-legendary {
    background: rgba(255, 140, 0, 0.2);
    color: #ff8c00;
}

.item-rarity.rarity-epic {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
}

.item-rarity.rarity-rare {
    background: rgba(77, 166, 255, 0.2);
    color: #4da6ff;
}

.item-rarity.rarity-uncommon {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.item-rarity.rarity-common {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

/* Item name */
.item-card .item-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
}

.item-card .item-quantity {
    font-size: 0.9rem;
    color: var(--color-primary);
    margin-left: 6px;
}

/* Item category */
.item-card .item-category {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

/* Item description */
.item-card .item-description {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 6px;
}

/* Item special effect */
.item-card .item-special {
    font-size: 0.85rem;
    color: var(--color-primary);
    font-style: italic;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(124, 92, 255, 0.1);
    border-radius: 6px;
}

/* Item wear level */
.item-card .item-wear {
    font-size: 0.75rem;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

.item-card .item-wear.wear-worn {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.item-card .item-wear.wear-damaged {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.item-card .item-wear.wear-broken {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Item notes */
.item-card .item-notes {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-border);
}

/* Item actions (equip buttons) */
.item-card .item-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}

.equip-slot-select {
    flex: 1;
    padding: 6px 10px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
    font-size: 0.85rem;
    cursor: pointer;
}

.equip-slot-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.btn-equip {
    padding: 6px 14px;
    font-size: 0.85rem;
    background: var(--color-primary);
    border: none;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-equip:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

.btn-equip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive inventory */
@media (max-width: 600px) {
    .equipment-grid,
    .inventory-grid {
        grid-template-columns: 1fr;
    }
    
    .inventory-modal {
        max-width: 100%;
        max-height: 90vh;
        border-radius: 12px 12px 0 0;
    }
}

/* ============================================
   CHARACTER INFO MODAL
   ============================================ */

.character-info-modal {
    background: var(--color-bg-secondary);
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.character-info-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.character-info-modal .modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-text);
}

.character-info-modal .modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    min-height: 400px;
}

/* Background summary */
.character-background-summary {
    padding: 16px 20px;
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border);
}

.character-background-summary .background-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}

.character-background-summary .background-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.character-background-summary .background-birthplace {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.character-background-summary .background-text {
    margin: 0 0 6px 0;
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.character-background-summary .background-text:last-child {
    margin-bottom: 0;
}

.character-background-summary .background-text.world-specific {
    padding-top: 6px;
    border-top: 1px dashed var(--color-border);
}

.character-info-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
}

/* Tabs layout */
.character-info-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tab-buttons {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    padding: 0 16px;
    background: var(--color-bg-tertiary);
    flex-wrap: wrap;
}

.tab-button {
    padding: 12px 18px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -2px;
    white-space: nowrap;
}

.tab-button:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.05);
}

.tab-button.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

/* Category sections */
.category-section {
    margin-bottom: 24px;
}

.category-section:last-child {
    margin-bottom: 0;
}

.category-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-empty {
    padding: 16px;
    background: var(--color-bg-primary);
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    text-align: center;
}

.category-empty .empty-text {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.9rem;
}

/* Entry list */
.entries-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-entry {
    position: relative;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 12px 14px;
    transition: all 0.15s ease;
    cursor: default;
}

.info-entry:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-tertiary);
}

.info-entry.deduced {
    border-left: 3px solid var(--color-primary);
}

.entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.entry-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
}

.deduced-badge {
    font-size: 0.9rem;
    opacity: 0.7;
}

.entry-description {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* Entry tooltip */
.entry-tooltip {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 8px;
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    animation: tooltipSlideUp 0.15s ease;
}

.entry-tooltip .tooltip-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 6px;
}

.entry-tooltip .tooltip-description {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;
}

.entry-tooltip .tooltip-deduction {
    font-size: 0.85rem;
    color: var(--color-primary);
    padding: 8px 10px;
    background: rgba(124, 92, 255, 0.1);
    border-radius: 4px;
    margin-bottom: 8px;
}

.entry-tooltip .tooltip-deduction .deduction-label {
    font-weight: 600;
    margin-right: 4px;
}

.entry-tooltip .tooltip-extra {
    padding-top: 8px;
    border-top: 1px dashed var(--color-border);
}

.entry-tooltip .extra-field {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.entry-tooltip .field-name {
    color: var(--color-text-muted);
    margin-right: 4px;
}

.entry-tooltip .field-value {
    color: var(--color-text);
}

.entry-tooltip .tooltip-time {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 8px;
    text-align: right;
}

/* Identity tab - Knowledge levels grid */
.knowledge-levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
}

.knowledge-level-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    transition: all 0.15s ease;
}

.knowledge-level-item:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-tertiary);
}

.knowledge-label {
    font-size: 0.9rem;
    color: var(--color-text);
    font-weight: 500;
}

.knowledge-value {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.knowledge-value.knowledge-none {
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.05);
}

.knowledge-value.knowledge-novice {
    color: #8bc34a;
    background: rgba(139, 195, 74, 0.12);
}

.knowledge-value.knowledge-intermediate {
    color: #29b6f6;
    background: rgba(41, 182, 246, 0.12);
}

.knowledge-value.knowledge-advanced {
    color: #ab47bc;
    background: rgba(171, 71, 188, 0.12);
}

.knowledge-value.knowledge-expert {
    color: #ffa726;
    background: rgba(255, 167, 38, 0.12);
}

/* Responsive */
@media (max-width: 600px) {
    .character-info-modal {
        max-width: 100%;
        max-height: 90vh;
        border-radius: 12px 12px 0 0;
    }
    
    .tab-buttons {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .tab-button {
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    .knowledge-levels-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   ACTION RESOLUTION COMPONENTS
   ============================================ */

/* Resolution Inline (compact badge in chat) */
.resolution-inline {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: var(--color-bg-tertiary);
    border: 2px solid var(--color-border);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    margin: 8px 0;
    overflow: hidden;
}

.resolution-inline-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
}

.resolution-inline-narration {
    padding: 0 14px 10px;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 8px;
    margin: 0 10px 10px;
    font-style: italic;
}

.resolution-inline:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.resolution-inline .resolution-icon {
    font-size: 1.1rem;
}

.resolution-inline .resolution-summary {
    flex: 1;
    color: var(--color-text);
    font-weight: 500;
}

.resolution-inline .resolution-outcome {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.resolution-inline .resolution-expand {
    opacity: 0.5;
    font-size: 0.9rem;
}

.resolution-inline:hover .resolution-expand {
    opacity: 1;
}

/* Outcome colors for inline */
.resolution-inline.outcome-critical-success {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
}
.resolution-inline.outcome-critical-success .resolution-outcome {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
}

.resolution-inline.outcome-success {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}
.resolution-inline.outcome-success .resolution-outcome {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.resolution-inline.outcome-partial {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}
.resolution-inline.outcome-partial .resolution-outcome {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.resolution-inline.outcome-failure {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}
.resolution-inline.outcome-failure .resolution-outcome {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.resolution-inline.outcome-critical-failure {
    border-color: #991b1b;
    background: rgba(153, 27, 27, 0.15);
}
.resolution-inline.outcome-critical-failure .resolution-outcome {
    background: rgba(153, 27, 27, 0.3);
    color: #fca5a5;
}

/* Resolution Detail Modal */
.resolution-detail-modal {
    background: var(--color-bg-secondary);
    border-radius: 12px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.resolution-detail-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.resolution-detail-modal .modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-text);
}

.resolution-detail-modal .modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.resolution-detail-modal .modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
}

.resolution-detail-modal .resolution-time {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Outcome banner */
.outcome-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 1.2rem;
    font-weight: 600;
}

.outcome-banner .outcome-icon {
    font-size: 2rem;
}

.outcome-banner .balance-label {
    font-size: 0.9rem;
    font-weight: 400;
    opacity: 0.8;
}

.outcome-banner.outcome-critical-success {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    border: 2px solid #ffd700;
}

.outcome-banner.outcome-success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 2px solid #22c55e;
}

.outcome-banner.outcome-partial {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 2px solid #f59e0b;
}

.outcome-banner.outcome-failure {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 2px solid #ef4444;
}

.outcome-banner.outcome-critical-failure {
    background: rgba(153, 27, 27, 0.2);
    color: #fca5a5;
    border: 2px solid #991b1b;
}

/* Action info */
.action-info {
    background: var(--color-bg-tertiary);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.action-info .info-row {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.action-info .info-row:last-child {
    margin-bottom: 0;
}

.action-info .info-label {
    font-weight: 500;
    color: var(--color-text-muted);
    min-width: 100px;
}

.action-info .info-value {
    color: var(--color-text);
}

.action-info .narrator-context {
    font-style: italic;
    color: var(--color-primary);
}

/* Factors container */
.factors-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.factors-section {
    background: var(--color-bg-primary);
    border-radius: 8px;
    padding: 14px 16px;
}

.factors-section h4 {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    color: var(--color-text);
}

.factors-section.positive {
    border-left: 3px solid #22c55e;
}

.factors-section.negative {
    border-left: 3px solid #ef4444;
}

.factors-section.neutral {
    border-left: 3px solid var(--color-text-muted);
}

.factors-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.factor-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.9rem;
}

.factor-item + .factor-item {
    border-top: 1px dashed var(--color-border);
}

.factor-impact {
    min-width: 24px;
    font-weight: 700;
    font-size: 0.8rem;
}

.factor-item.impact-minor .factor-impact { color: #6b7280; }
.factor-item.impact-moderate .factor-impact { color: #3b82f6; }
.factor-item.impact-major .factor-impact { color: #a855f7; }
.factor-item.impact-decisive .factor-impact { color: #ffd700; }

.factor-element {
    flex: 1;
    color: var(--color-text);
}

.factor-source {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.neutrality-reason {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Consequences section */
.consequences-section {
    background: var(--color-bg-tertiary);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border-left: 3px solid var(--color-primary);
}

.consequences-section h4 {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    color: var(--color-text);
}

.consequences-list {
    margin: 0;
    padding-left: 20px;
}

.consequences-list li {
    margin-bottom: 6px;
    color: var(--color-text-secondary);
}

/* Narration section */
.narration-section {
    margin-bottom: 16px;
}

.narration-section h4 {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    color: var(--color-text);
}

.narration-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    padding: 12px 16px;
    background: var(--color-bg-primary);
    border-radius: 8px;
    border-left: 3px solid var(--color-text-muted);
}

/* ============================================
   CLARIFICATION MODAL
   ============================================ */

.clarification-modal {
    background: var(--color-bg-secondary);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.clarification-modal .modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.clarification-modal .modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-primary);
}

.clarification-modal .modal-content {
    padding: 20px;
}

.clarification-modal .modal-footer {
    display: flex;
    justify-content: center;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
}

.clarification-context {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--color-bg-tertiary);
    border-radius: 8px;
}

.clarification-context .context-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.clarification-context p {
    margin: 8px 0 0;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}

.clarification-question {
    margin-bottom: 20px;
    text-align: center;
}

.clarification-question p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-text);
}

.clarification-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.option-btn {
    padding: 12px 16px;
    background: var(--color-bg-tertiary);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.option-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-secondary);
}

.option-btn.selected {
    border-color: var(--color-primary);
    background: rgba(124, 92, 255, 0.1);
    color: var(--color-primary);
}

.clarification-input textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--color-bg-tertiary);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
}

.clarification-input textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.clarification-impact {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 8px;
    margin-top: 16px;
}

.clarification-impact .impact-label {
    font-weight: 500;
    color: #f59e0b;
}

.clarification-impact .impact-text {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

/* Message resolutions container */
.message-resolutions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Location change indicator */
.chat-message .message-location-change {
    font-style: italic;
    color: #666;
    font-size: 0.82rem;
    margin-bottom: 14px;
    padding: 2px 0;
    cursor: default;
}

.chat-message .message-location-change:hover {
    color: #888;
}

/* Location tooltip (follows mouse) */
.location-tooltip-fixed {
    position: fixed;
    width: 260px;
    max-width: 90vw;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    z-index: 100000;
    pointer-events: none;
    animation: tooltipFadeIn 0.1s ease;
}

.location-tooltip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.location-tooltip-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.location-tooltip-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
    flex: 1;
}

.location-tooltip-type {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
}

.location-tooltip-description {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 6px;
}

.location-tooltip-ambiance {
    font-size: 0.8rem;
    color: var(--color-primary);
    font-style: italic;
    padding-top: 6px;
    border-top: 1px dashed var(--color-border);
    margin-bottom: 6px;
}

.location-tooltip-parent {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
}

.location-tooltip-parent .parent-label {
    opacity: 0.7;
}

/* Quest step completion indicator */
.chat-message .message-quest-step {
    font-style: italic;
    color: #666;
    font-size: 0.82rem;
    margin-bottom: 14px;
    padding: 2px 0;
    cursor: default;
}

.chat-message .message-quest-step:hover {
    color: #888;
}

/* Quest step tooltip (follows mouse) */
.quest-step-tooltip-fixed {
    position: fixed;
    width: 240px;
    max-width: 90vw;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    z-index: 100000;
    pointer-events: none;
    animation: tooltipFadeIn 0.1s ease;
}

.quest-step-tooltip-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.quest-step-tooltip-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.quest-step-tooltip-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #22c55e;
}

.quest-step-tooltip-quest {
    font-size: 0.85rem;
    color: var(--color-text);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.quest-step-tooltip-quest-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.quest-step-tooltip-description {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    padding-top: 6px;
    border-top: 1px dashed var(--color-border);
}

/* Loot inline indicator */
.loot-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #666;
    font-style: italic;
    padding: 2px 0;
    margin-bottom: 6px;
    cursor: pointer;
    transition: color 0.15s;
}

.loot-inline:hover {
    color: #888;
}

.loot-inline-icon {
    font-size: 0.85rem;
    font-style: normal;
}

.loot-inline-label {
    user-select: none;
}

.loot-inline-chevron {
    font-size: 0.9rem;
    font-style: normal;
    transition: transform 0.2s;
    display: inline-block;
}

.loot-inline-chevron.expanded {
    transform: rotate(90deg);
}

.loot-inline-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 10px;
    padding-left: 20px;
}

.loot-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    padding: 3px 8px;
    border-radius: 4px;
    border-left: 2px solid #9ca3af;
    background: rgba(255, 255, 255, 0.02);
    cursor: default;
    transition: background 0.15s;
}

.loot-item-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.loot-item-row.rarity-common { border-color: #9ca3af; }
.loot-item-row.rarity-uncommon { border-color: #22c55e; }
.loot-item-row.rarity-rare { border-color: #3b82f6; }
.loot-item-row.rarity-epic { border-color: #a855f7; }
.loot-item-row.rarity-legendary { border-color: #f97316; }
.loot-item-row.rarity-mythic { border-color: #ef4444; }

.loot-item-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.loot-item-name {
    color: var(--color-text-secondary);
    flex: 1;
}

.loot-item-rarity {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--color-text-muted);
    opacity: 0.8;
}

.loot-item-source {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    opacity: 0.6;
    font-style: italic;
}

/* Loot tooltip (follows mouse) */
.loot-tooltip-fixed {
    position: fixed;
    width: 220px;
    max-width: 90vw;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    z-index: 100000;
    pointer-events: none;
    animation: tooltipFadeIn 0.1s ease;
}

.loot-tooltip-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.loot-tooltip-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.loot-tooltip-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text);
    flex: 1;
}

.loot-tooltip-rarity {
    font-size: 0.7rem;
    text-transform: uppercase;
}

.rarity-text-common { color: #9ca3af; }
.rarity-text-uncommon { color: #22c55e; }
.rarity-text-rare { color: #3b82f6; }
.rarity-text-epic { color: #a855f7; }
.rarity-text-legendary { color: #f97316; }
.rarity-text-mythic { color: #ef4444; }

.loot-tooltip-category {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.loot-tooltip-description {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-top: 6px;
    line-height: 1.35;
}

.loot-tooltip-source {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--color-border);
}

/* Journal tabs */
.journal-tabs {
    display: flex;
    gap: 4px;
    padding: 0 16px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
}

.journal-tabs .tab-btn {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.journal-tabs .tab-btn:hover {
    color: var(--color-text);
    background: var(--color-bg-secondary);
}

.journal-tabs .tab-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Journal resolution items */
.journal-item.resolution {
    cursor: pointer;
    transition: all 0.2s ease;
}

.journal-item.resolution:hover {
    transform: translateX(4px);
    border-left-width: 4px;
}

.journal-item.resolution.outcome-critical-success {
    border-left-color: #ffd700;
}

.journal-item.resolution.outcome-success {
    border-left-color: #22c55e;
}

.journal-item.resolution.outcome-partial {
    border-left-color: #f59e0b;
}

.journal-item.resolution.outcome-failure {
    border-left-color: #ef4444;
}

.journal-item.resolution.outcome-critical-failure {
    border-left-color: #991b1b;
}

.resolution-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.resolution-action {
    font-weight: 600;
    color: var(--color-text);
}

.resolution-summary {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.item-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.factor-count {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.factor-count.positive {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.factor-count.negative {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.type-badge {
    background: var(--color-bg-primary) !important;
    color: var(--color-text-muted) !important;
}

/* Resolution Stats Filter Pills */
.resolution-stats-bar {
    display: flex;
    gap: 6px;
    padding: 8px 0;
    flex-wrap: wrap;
    align-items: center;
}

.stat-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
}

.stat-pill:hover {
    transform: scale(1.05);
}

.stat-pill.active {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.stat-pill .pill-count {
    font-weight: 700;
}

.stat-pill .pill-icon {
    font-size: 0.9rem;
}

.stat-pill.critical-success {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
}

.stat-pill.critical-success.active {
    background: rgba(255, 215, 0, 0.3);
}

.stat-pill.success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.stat-pill.success.active {
    background: rgba(34, 197, 94, 0.3);
}

.stat-pill.partial {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.stat-pill.partial.active {
    background: rgba(245, 158, 11, 0.3);
}

.stat-pill.failure {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.stat-pill.failure.active {
    background: rgba(239, 68, 68, 0.3);
}

.stat-pill.critical-failure {
    background: rgba(153, 27, 27, 0.15);
    color: #dc2626;
}

.stat-pill.critical-failure.active {
    background: rgba(153, 27, 27, 0.3);
}

.stat-pill.clear-filter {
    background: var(--color-bg-secondary);
    color: var(--color-text-muted);
    padding: 4px 8px;
    font-size: 0.75rem;
}

.stat-pill.clear-filter:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
}

/* Recent Actions Widget */
.recent-actions-widget {
    background: var(--color-bg-secondary);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 12px;
}

.widget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--color-bg-tertiary);
    cursor: pointer;
    transition: background 0.2s ease;
}

.widget-header:hover {
    background: var(--color-bg-secondary);
}

.widget-title {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

.widget-count {
    font-size: 0.75rem;
    padding: 2px 6px;
    background: var(--color-bg-primary);
    border-radius: 10px;
    color: var(--color-text-muted);
}

.widget-toggle {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.widget-content {
    padding: 8px;
}

.widget-loading,
.widget-empty {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: center;
    padding: 8px;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.action-item:hover {
    background: var(--color-bg-tertiary);
}

.action-item.outcome-critical-success { border-left-color: #ffd700; }
.action-item.outcome-success { border-left-color: #22c55e; }
.action-item.outcome-partial { border-left-color: #f59e0b; }
.action-item.outcome-failure { border-left-color: #ef4444; }
.action-item.outcome-critical-failure { border-left-color: #991b1b; }

.action-icon {
    font-size: 0.9rem;
}

.action-summary {
    flex: 1;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar adjustments for widget */
.game-sidebar-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Character Stats Section */
/* Fortune Widget */
.fortune-widget {
    background: var(--color-bg-secondary);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.fortune-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), transparent);
    cursor: pointer;
    transition: background 0.2s ease;
}

.fortune-header:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), transparent);
}

.fortune-icon {
    font-size: 1rem;
}

.fortune-title {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

.fortune-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffd700;
}

.fortune-content {
    padding: 12px;
}

.fortune-bar {
    height: 6px;
    background: var(--color-bg-primary);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.fortune-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #ffaa00);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.fortune-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.stat-earned { color: #22c55e; }
.stat-spent { color: #ef4444; }

.fortune-history {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

.history-item {
    display: flex;
    gap: 8px;
    font-size: 0.75rem;
    padding: 4px 0;
}

.history-delta {
    font-weight: 600;
    min-width: 30px;
}

.history-item.positive .history-delta { color: #22c55e; }
.history-item.negative .history-delta { color: #ef4444; }

.history-reason {
    color: var(--color-text-secondary);
}

.fortune-costs {
    display: flex;
    gap: 8px;
}

.cost-item {
    flex: 1;
    text-align: center;
    padding: 6px;
    background: var(--color-bg-tertiary);
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: help;
}

.cost-label {
    display: block;
    color: var(--color-text-muted);
    margin-bottom: 2px;
}

.cost-value {
    display: block;
    font-weight: 600;
    color: #ffd700;
}

/* Fortune/Retry button */
.btn-fortune {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #000;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-fortune:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.btn-fortune:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.retry-badge {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    padding: 4px 8px;
    background: var(--color-bg-tertiary);
    border-radius: 4px;
}

.retry-message {
    padding: 8px 12px;
    margin-top: 8px;
    border-radius: 4px;
    font-size: 0.85rem;
}

.retry-message.success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.retry-message.error {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.footer-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Boost button variant */
.btn-fortune.boost {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.btn-fortune.boost:hover:not(:disabled) {
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.btn-fortune.retry {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.btn-fortune.retry:hover:not(:disabled) {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.boost-badge {
    font-size: 0.8rem;
    color: #22c55e;
    padding: 4px 8px;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 4px;
}

/* Boosted outcome indicator in banner */
.outcome-banner.was-boosted::after {
    content: "⬆️ Boosté";
    font-size: 0.7rem;
    margin-left: 8px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* Skills Widget */
.skills-widget {
    background: var(--color-bg-secondary);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 8px;
}

.skills-widget .widget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--color-bg-tertiary);
    cursor: pointer;
    transition: background 0.2s ease;
}

.skills-widget .widget-header:hover {
    background: var(--color-bg-secondary);
}

.skills-widget .widget-icon {
    font-size: 0.9rem;
}

.skills-widget .widget-title {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

.skills-widget .widget-content {
    padding: 8px;
}

.skill-item {
    padding: 8px;
    margin-bottom: 4px;
    background: var(--color-bg-tertiary);
    border-radius: 6px;
    cursor: help;
}

.skill-item:last-child {
    margin-bottom: 0;
}

.skill-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.skill-icon {
    font-size: 0.85rem;
}

.skill-name {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text);
}

.skill-level {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.skill-level.level-novice {
    background: rgba(156, 163, 175, 0.2);
    color: #9ca3af;
}

.skill-level.level-apprentice {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.skill-level.level-competent {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.skill-level.level-expert {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.skill-level.level-master {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
}

.skill-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.skill-bar {
    flex: 1;
    height: 4px;
    background: var(--color-bg-primary);
    border-radius: 2px;
    overflow: hidden;
}

.skill-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.skill-rate {
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 32px;
    text-align: right;
}

.skill-rate.excellent { color: #22c55e; }
.skill-rate.good { color: #84cc16; }
.skill-rate.average { color: #f59e0b; }
.skill-rate.poor { color: #ef4444; }

/* Toast Notifications */
.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.notification-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border-left: 4px solid var(--color-primary);
    animation: slideIn 0.3s ease;
    pointer-events: auto;
}

.notification-toast.exiting {
    animation: slideOut 0.3s ease forwards;
}

@keyframes slideIn {
    from {
        transform: translateX(120%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

.notification-toast.fortune {
    border-left-color: #ffd700;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), var(--color-bg-secondary));
}

.notification-toast.fortuneloss {
    border-left-color: #f59e0b;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.1), var(--color-bg-secondary));
}

.notification-toast.success {
    border-left-color: #22c55e;
}

.notification-toast.error {
    border-left-color: #ef4444;
}

.notification-toast.warning {
    border-left-color: #f59e0b;
}

.notification-icon {
    font-size: 1.2rem;
}

.notification-message {
    font-size: 0.9rem;
    color: var(--color-text);
    max-width: 300px;
}

/* Divine Intervention button */
.btn-fortune.divine {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    position: relative;
    overflow: hidden;
}

.btn-fortune.divine::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 70%
    );
    animation: divineShine 2s ease infinite;
}

@keyframes divineShine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

.btn-fortune.divine:hover:not(:disabled) {
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.5);
}

.divine-badge {
    font-size: 0.8rem;
    color: #8b5cf6;
    padding: 4px 8px;
    background: rgba(139, 92, 246, 0.15);
    border-radius: 4px;
}

/* Momentum Widget */
.momentum-widget {
    background: var(--color-bg-secondary);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 8px;
    border-left: 3px solid var(--color-border);
    transition: all 0.3s ease;
}

.momentum-widget.momentum-on-fire {
    border-left-color: #f97316;
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.1), var(--color-bg-secondary));
}

.momentum-widget.momentum-hot {
    border-left-color: #fbbf24;
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.1), var(--color-bg-secondary));
}

.momentum-widget.momentum-building {
    border-left-color: #22c55e;
}

.momentum-widget.momentum-struggling {
    border-left-color: #f59e0b;
}

.momentum-widget.momentum-cold {
    border-left-color: #3b82f6;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), var(--color-bg-secondary));
}

.momentum-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.momentum-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.momentum-indicator {
    font-size: 0.9rem;
}

.momentum-description {
    flex: 1;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    text-align: right;
}

.momentum-factor {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    cursor: help;
}

.factor-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.7rem;
}

.factor-icon.positive {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.factor-icon.negative {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.factor-text {
    flex: 1;
}

/* Quick Actions Panel */
.quick-actions-panel {
    background: var(--color-bg-secondary);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.quick-actions-panel .panel-header {
    padding: 10px 12px;
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border);
}

.quick-actions-panel .panel-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 8px;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px;
    background: var(--color-bg-tertiary);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-action-btn:hover {
    background: var(--color-bg-primary);
    transform: translateY(-2px);
}

.quick-action-btn .action-icon {
    font-size: 1.2rem;
}

.quick-action-btn .action-label {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    text-align: center;
}

/* Category colors */
.quick-action-btn.exploration:hover {
    border-color: #22c55e;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}

.quick-action-btn.movement:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.quick-action-btn.stealth:hover {
    border-color: #8b5cf6;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
}

.quick-action-btn.social:hover {
    border-color: #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.quick-action-btn.combat:hover {
    border-color: #ef4444;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.quick-action-btn.utility:hover {
    border-color: #06b6d4;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.2);
}

/* Responsive grid */
@media (max-width: 400px) {
    .actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Input row with toggle */
.input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.input-row .chat-input-wrapper {
    flex: 1;
}

.toggle-quick-actions {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-quick-actions:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-primary);
}

.toggle-quick-actions.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* Environment Widget - Compact inline version */
.environment-widget {
    position: relative;
    background: var(--color-bg-tertiary);
    border-radius: 6px;
}

.environment-widget .widget-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.environment-widget .widget-header:hover {
    background: var(--color-bg-secondary);
}

.environment-widget .widget-icons {
    display: flex;
    align-items: center;
    gap: 2px;
}

.environment-widget .env-icon-dot {
    font-size: 0.75rem;
    opacity: 0.9;
}

.environment-widget .env-icon-dot.negative {
    filter: saturate(1.2);
}

.environment-widget .env-icon-count {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    margin-left: 2px;
}

.environment-widget .widget-toggle {
    font-size: 0.55rem;
    color: var(--color-text-muted);
    margin-left: 2px;
}

/* Environment Dropdown */
.environment-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    margin-top: 4px;
    padding: 6px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    z-index: 100;
    animation: tooltipSlideDown 0.15s ease;
}

.environment-dropdown .modifier-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    border-left: 2px solid transparent;
    cursor: default;
    transition: background 0.15s ease;
}

.environment-dropdown .modifier-row:hover {
    background: var(--color-bg-tertiary);
}

.environment-dropdown .modifier-row.positive {
    border-left-color: #22c55e;
}

.environment-dropdown .modifier-row.negative {
    border-left-color: #ef4444;
}

.environment-dropdown .modifier-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.environment-dropdown .modifier-name {
    flex: 1;
    font-size: 0.8rem;
    color: var(--color-text);
    white-space: nowrap;
}

.environment-dropdown .modifier-impact {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.environment-dropdown .modifier-impact.impact-minor { color: #9ca3af; }
.environment-dropdown .modifier-impact.impact-moderate { color: #f59e0b; }
.environment-dropdown .modifier-impact.impact-major { color: #ef4444; }
.environment-dropdown .modifier-impact.impact-decisive { color: #dc2626; }

.environment-dropdown .modifier-timer {
    font-size: 0.7rem;
    flex-shrink: 0;
    animation: pulse 2s ease infinite;
}

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

/* Modifier Tooltip (on hover) */
.environment-dropdown .modifier-tooltip {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    margin-right: 8px;
    padding: 10px 12px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    animation: tooltipSlideLeft 0.12s ease;
}

.environment-dropdown .modifier-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: var(--color-bg-tertiary);
}

@keyframes tooltipSlideLeft {
    from { opacity: 0; transform: translateY(-50%) translateX(5px); }
    to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.environment-dropdown .modifier-tooltip .tooltip-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}

.environment-dropdown .modifier-tooltip .tooltip-description {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* ============================================
   GAME TOOLBAR RIGHT (time + environment)
   ============================================ */

.game-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================================
   TIME WIDGET
   ============================================ */

.time-widget {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: var(--color-bg-tertiary);
    border-radius: 6px;
    white-space: nowrap;
}

.time-widget .time-emoji {
    font-size: 0.85rem;
}

.time-widget .time-text {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* ============================================
   ABILITIES MODAL
   ============================================ */

.abilities-modal {
    background: var(--color-bg-secondary, #1a1a24);
    border: 1px solid var(--color-border, #333);
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.abilities-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.abilities-modal .modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-text);
}

.abilities-modal .modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    padding: 0 24px;
    background: var(--color-bg-tertiary);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
}

.abilities-modal .tab {
    padding: 14px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    margin-bottom: -2px;
}

.abilities-modal .tab:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.05);
}

.abilities-modal .tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.abilities-modal .modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    min-height: 0;
}

.abilities-modal .abilities-content {
    padding: 20px 24px;
}

.abilities-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

.abilities-modal .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    padding: 20px 24px;
    color: var(--color-text-muted);
}

.abilities-modal .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.abilities-modal .empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.abilities-modal .empty-state p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 1rem;
}

.abilities-modal .empty-state .empty-hint {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Abilities content layout */
.abilities-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ability-type-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.type-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
    font-size: 1rem;
    color: var(--color-text);
}

.type-header .type-icon {
    font-size: 1.1rem;
}

.type-header .type-count {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-weight: normal;
}

/* Abilities list */
.abilities-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Individual ability card */
.ability-card {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px;
    transition: all 0.2s ease;
}

.ability-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ability-card.learning {
    opacity: 0.75;
    border-style: dashed;
}

/* Power level border colors */
.ability-card.power-1,
.ability-card.power-2 {
    border-left: 3px solid #666;
}

.ability-card.power-3,
.ability-card.power-4 {
    border-left: 3px solid #22c55e;
}

.ability-card.power-5,
.ability-card.power-6 {
    border-left: 3px solid #3b82f6;
}

.ability-card.power-7,
.ability-card.power-8 {
    border-left: 3px solid #a855f7;
}

.ability-card.power-9,
.ability-card.power-10 {
    border-left: 3px solid #ffd700;
}

/* Ability header */
.ability-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ability-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
}

.ability-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.learning-badge {
    opacity: 0.8;
}

.power-badge {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 8px;
    background: var(--color-bg-secondary);
}

.power-badge.power-low {
    color: #888;
}

.power-badge.power-medium {
    color: #22c55e;
}

.power-badge.power-high {
    color: #3b82f6;
}

.power-badge.power-very-high {
    color: #a855f7;
}

.power-badge.power-legendary {
    color: #ffd700;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
}

/* Ability effect */
.ability-effect {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

/* Ability details grid */
.ability-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 8px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
}

.detail-item .detail-icon {
    font-size: 0.85rem;
}

.detail-item .detail-label {
    color: var(--color-text-muted);
}

.detail-item .detail-value {
    color: var(--color-text);
    font-weight: 500;
}

/* Cost specific styling */
.detail-item.cost .detail-value {
    color: #ef4444;
}

/* Ability conditions */
.ability-conditions {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 6px;
    margin-top: 8px;
}

.ability-conditions .conditions-icon {
    flex-shrink: 0;
}

.ability-conditions .conditions-text {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* Ability source */
.ability-source {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.ability-source .source-label {
    margin-right: 4px;
}

.ability-source .source-value {
    font-style: italic;
}

/* Responsive */
@media (max-width: 600px) {
    .abilities-modal {
        max-width: 100%;
        max-height: 90vh;
        border-radius: 12px 12px 0 0;
    }
    
    .ability-details {
        flex-direction: column;
        gap: 6px;
    }
}

/* ===================================
   MENTION AUTOCOMPLETE STYLES
   =================================== */

/* Chat input wrapper for positioning dropdown */
.chat-input .chat-input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
}

.chat-input .chat-input-wrapper textarea {
    flex: 1;
    padding: 14px 18px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: 1rem;
    resize: none;
    min-height: 50px;
    max-height: 150px;
    line-height: 1.4;
}

.chat-input .chat-input-wrapper textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Mention dropdown container */
.mention-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 8px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    max-height: 350px;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow: hidden;
}

.mention-dropdown-header {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
}

.mention-hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.mention-dropdown-content {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.mention-dropdown-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    display: flex;
    gap: 16px;
    justify-content: flex-end;
}

.mention-shortcut {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.mention-shortcut kbd {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: monospace;
    font-size: 0.7rem;
}

/* Category headers */
.mention-category {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--color-bg-tertiary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
}

.mention-category-icon {
    font-size: 0.85rem;
}

/* Individual mention items */
.mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.mention-item:hover,
.mention-item.selected {
    background: var(--color-bg-tertiary);
}

.mention-item.selected {
    border-left: 3px solid var(--color-primary);
    padding-left: 9px;
}

.mention-item-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.mention-item-content {
    flex: 1;
    min-width: 0;
}

.mention-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mention-item-name {
    font-weight: 600;
    color: var(--color-text);
}

.mention-item-type-badge {
    font-size: 0.7rem;
    color: var(--color-text);
    background: var(--color-bg-tertiary);
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 500;
}

.mention-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}

.mention-item-context {
    font-size: 0.75rem;
    color: #ffd700;
    opacity: 0.9;
}

.mention-item-separator {
    color: var(--color-text-muted);
    font-size: 0.6rem;
}

.mention-item-description {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
}


.mention-empty {
    padding: 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Mention tags in text (styled mentions in input/messages) */
.mention-tag {
    display: inline;
    background: rgba(var(--color-primary-rgb), 0.15);
    color: var(--color-primary);
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 600px) {
    .mention-dropdown {
        max-height: 250px;
    }
    
    .mention-item {
        padding: 8px 10px;
    }
    
    .mention-item-description {
        display: none;
    }
}

/* ===================================
   MENTION LINKS IN MESSAGES
   =================================== */

.mention-link {
    display: inline;
    background: rgba(255, 215, 0, 0.25);
    color: #ffd700;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    cursor: help;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 215, 0, 0.4);
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.mention-link:hover {
    background: rgba(255, 215, 0, 0.35);
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* Different style for mentions in user messages (lighter background) */
.chat-message.user .mention-link {
    background: rgba(255, 215, 0, 0.3);
    border-color: rgba(255, 215, 0, 0.5);
}

/* Mention tooltip (global, positioned via JS) */
.mention-tooltip-global {
    position: fixed;
    z-index: 10000;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    padding: 12px 14px;
    min-width: 200px;
    max-width: 350px;
    pointer-events: none;
    animation: mentionTooltipFadeIn 0.15s ease-out;
}

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

.mention-tooltip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.mention-tooltip-icon {
    font-size: 1.3rem;
}

.mention-tooltip-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
    flex: 1;
}

.mention-tooltip-type {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
}

.mention-tooltip-knowledge {
    font-size: 0.8rem;
    color: var(--color-primary);
    margin-bottom: 6px;
    padding: 4px 8px;
    background: rgba(var(--color-primary-rgb), 0.1);
    border-radius: 4px;
    display: inline-block;
}

.mention-tooltip-description {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    border-top: 1px solid var(--color-border);
    padding-top: 8px;
    margin-top: 4px;
}

/* ===================================
   LINKED ENTITIES PILLS (above input)
   =================================== */

.chat-input-container-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
    position: relative;
}

.linked-entities-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background: var(--color-bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.linked-entity-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 16px;
    font-size: 0.8rem;
    cursor: default;
    transition: all 0.2s ease;
}

.linked-entity-pill:hover {
    background: rgba(255, 215, 0, 0.25);
    border-color: rgba(255, 215, 0, 0.5);
}

.pill-icon {
    font-size: 0.9rem;
}

.pill-name {
    color: #ffd700;
    font-weight: 500;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pill-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    margin-left: 2px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pill-remove:hover {
    background: rgba(255, 100, 100, 0.3);
    color: #ff6666;
}

/* Pill tooltip (positioned relative to input container) */
.pill-tooltip {
    position: absolute;
    bottom: 100%;
    left: 12px;
    margin-bottom: 8px;
    z-index: 1001;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    padding: 12px 14px;
    min-width: 200px;
    max-width: 350px;
    animation: mentionTooltipFadeIn 0.15s ease-out;
}

.pill-tooltip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.pill-tooltip-icon {
    font-size: 1.3rem;
}

.pill-tooltip-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
    flex: 1;
}

.pill-tooltip-type {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
}

.pill-tooltip-knowledge {
    font-size: 0.8rem;
    color: #ffd700;
    margin-bottom: 6px;
    padding: 4px 8px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 4px;
    display: inline-block;
}

.pill-tooltip-description {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    border-top: 1px solid var(--color-border);
    padding-top: 8px;
    margin-top: 4px;
}

/* === Conversation Modal === */
.conversation-modal {
    background: var(--color-bg-secondary);
    border-radius: 16px;
    width: 600px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border);
}

.conversation-modal.status-success {
    border-color: var(--color-success);
}

.conversation-modal.status-failed {
    border-color: var(--color-accent);
}

.conversation-modal.status-abandoned {
    border-color: var(--color-text-muted);
}

.conversation-modal.status-paused {
    border-color: #f59e0b;
}

.conversation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border);
    border-radius: 16px 16px 0 0;
}

.conversation-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.conversation-icon {
    font-size: 1.8rem;
}

.conversation-header-text h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-text);
}

.conversation-goal-type {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.conversation-goal {
    padding: 12px 20px;
    background: rgba(124, 92, 255, 0.1);
    border-bottom: 1px solid var(--color-border);
}

.goal-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.goal-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.goal-text {
    flex: 1;
    font-size: 0.95rem;
    color: var(--color-text);
}

.btn-edit-goal {
    padding: 4px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}

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

.goal-edit {
    display: flex;
    gap: 8px;
}

.goal-edit input {
    flex: 1;
    padding: 8px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: var(--font-main);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.9rem;
}

.conversation-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
    max-height: 400px;
}

.conversation-message {
    padding: 12px 16px;
    border-radius: 12px;
    max-width: 85%;
}

.conversation-message.player {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--color-primary), #5a3fd4);
    color: white;
}

.conversation-message.npc {
    align-self: flex-start;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
}

.conversation-message.system {
    align-self: stretch;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-left: 3px solid rgba(255, 215, 0, 0.5);
    max-width: 100%;
    border-radius: 8px;
    padding: 0;
}

.conversation-message.system.perceived {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
    border-color: rgba(245, 158, 11, 0.2);
    border-left-color: #f59e0b;
}

.conversation-message.system.unperceived {
    border-left-color: var(--color-text-muted);
    background: var(--color-bg-tertiary);
    opacity: 0.7;
}

.conversation-message.system.pause {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
    border-color: rgba(245, 158, 11, 0.2);
    border-left-color: #f59e0b;
}

.conversation-message.system.resume {
    border-left-color: var(--color-success);
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.08), rgba(78, 205, 196, 0.02));
    border-color: rgba(78, 205, 196, 0.2);
    border-left-color: var(--color-success);
}

.conversation-message.system .system-message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

.conversation-message.system.perceived .system-message-header {
    color: #f59e0b;
}

.conversation-message.system.unperceived .system-message-header {
    color: var(--color-text-muted);
}

.conversation-message.system.pause .system-message-header {
    color: #f59e0b;
}

.conversation-message.system.resume .system-message-header {
    color: var(--color-success);
}

.conversation-message.system .system-message-icon {
    font-size: 0.95rem;
    flex-shrink: 0;
}

.conversation-message.system .system-message-label {
    flex: 1;
}

.conversation-message.system .system-message-header .message-time {
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: normal;
    flex-shrink: 0;
}

.conversation-message.system .system-message-body {
    padding: 2px 14px 12px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.conversation-message.system .system-message-body p {
    margin: 0;
}

.conversation-message.system .system-message-impact {
    padding: 10px 14px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.12);
    border-radius: 0 0 8px 5px;
}

.conversation-message.system .system-message-impact p {
    margin: 0;
    display: inline;
}

.conversation-message.system .impact-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-right: 6px;
}

.conversation-message .message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 0.75rem;
}

.conversation-message.player .message-header {
    color: rgba(255, 255, 255, 0.7);
}

.conversation-message.npc .message-header {
    color: var(--color-text-muted);
}

.conversation-message .message-role {
    font-weight: 600;
}

.conversation-message .message-content {
    font-size: 0.95rem;
    line-height: 1.5;
}

.conversation-message .message-content p {
    margin: 0 0 0.5em 0;
}

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

.conversation-message.generating .typing-indicator {
    display: inline-flex;
    gap: 4px;
}

.conversation-message.generating .typing-indicator span {
    width: 8px;
    height: 8px;
    background: var(--color-text-muted);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out both;
}

.conversation-message.generating .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.conversation-message.generating .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

.conversation-ended {
    padding: 16px;
    text-align: center;
}

.ended-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 600;
}

.ended-banner.success {
    background: rgba(78, 205, 196, 0.2);
    color: var(--color-success);
}

.ended-banner.failed {
    background: rgba(255, 107, 107, 0.2);
    color: var(--color-accent);
}

.ended-summary {
    margin-top: 12px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.conversation-paused-banner {
    padding: 16px;
    text-align: center;
}

.paused-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 600;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.paused-reason {
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.paused-count {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.conversation-input-container {
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    border-radius: 0 0 16px 16px;
}

.conversation-input-container textarea {
    width: 100%;
    padding: 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: 0.95rem;
    resize: none;
    margin-bottom: 12px;
}

.conversation-input-container textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.conversation-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.btn-end-conversation {
    padding: 10px 16px;
    background: rgba(255, 107, 107, 0.2);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    font-size: 0.9rem;
}

.btn-end-conversation:hover:not(:disabled) {
    background: rgba(255, 107, 107, 0.3);
}

.btn-send {
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--color-primary), #5a3fd4);
    color: white;
    font-size: 0.95rem;
}

.btn-send:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-primary-hover), #6b4fdb);
}

.btn-resume {
    padding: 10px 24px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #1a1a2e;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-resume:hover:not(:disabled) {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    transform: translateY(-1px);
}

.btn-resume:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.conversation-input-container.paused {
    border-top-color: rgba(245, 158, 11, 0.3);
}

.conversation-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    border-radius: 0 0 16px 16px;
    text-align: center;
}

/* === Conversation Inline (Chat Pill) === */
.conversation-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--color-bg-tertiary);
    border: 2px solid var(--color-border);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    margin: 8px 0;
}

.conversation-inline:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Status-specific styles */
.conversation-inline.conversation-success {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.conversation-inline.conversation-failed {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.conversation-inline.conversation-abandoned {
    border-color: #6b7280;
    background: rgba(107, 114, 128, 0.1);
}

.conversation-inline.conversation-in-progress {
    border-color: var(--color-primary);
    background: rgba(99, 102, 241, 0.1);
}

.conversation-inline.conversation-paused {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.conversation-inline .conversation-pill-icon {
    font-size: 1.1rem;
}

.conversation-inline .conversation-pill-summary {
    flex: 1;
    font-size: 0.9rem;
    color: var(--color-text);
    font-weight: 500;
}

.conversation-inline .conversation-pill-status {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.conversation-inline.conversation-success .conversation-pill-status {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.conversation-inline.conversation-failed .conversation-pill-status {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.conversation-inline.conversation-abandoned .conversation-pill-status {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

.conversation-inline.conversation-in-progress .conversation-pill-status {
    background: rgba(99, 102, 241, 0.2);
    color: var(--color-primary);
}

.conversation-inline.conversation-paused .conversation-pill-status {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.conversation-inline .conversation-pill-expand {
    opacity: 0.5;
    font-size: 0.9rem;
}

.conversation-inline:hover .conversation-pill-expand {
    opacity: 1;
}

/* Floating pill for minimized active conversation */
.conversation-floating-pill {
    position: fixed;
    bottom: 100px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-primary);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: pulse-border 2s ease-in-out infinite;
}

.conversation-floating-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.4);
    background: var(--color-bg-tertiary);
}

@keyframes pulse-border {
    0%, 100% {
        border-color: var(--color-primary);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
    50% {
        border-color: rgba(99, 102, 241, 0.6);
        box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
    }
}

.conversation-floating-pill .pill-icon {
    font-size: 1.2rem;
}

.conversation-floating-pill .pill-text {
    font-weight: 600;
    color: var(--color-text);
}

.conversation-floating-pill .pill-status {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    background: rgba(99, 102, 241, 0.2);
    color: var(--color-primary);
}

.conversation-floating-pill .pill-expand {
    opacity: 0.6;
    font-size: 1rem;
    transition: opacity 0.2s;
}

.conversation-floating-pill:hover .pill-expand {
    opacity: 1;
}

.conversation-floating-pill.paused {
    border-color: #f59e0b;
    animation: none;
    opacity: 0.85;
}

.conversation-floating-pill.paused:hover {
    opacity: 1;
    box-shadow: 0 6px 24px rgba(245, 158, 11, 0.3);
}

.conversation-floating-pill.paused .pill-status {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.conversation-floating-pill.has-unread {
    border-color: #f59e0b;
    animation: pulse-unread 1.5s ease-in-out infinite;
}

@keyframes pulse-unread {
    0%, 100% {
        border-color: #f59e0b;
        box-shadow: 0 4px 20px rgba(245, 158, 11, 0.2);
    }
    50% {
        border-color: #fbbf24;
        box-shadow: 0 4px 24px rgba(245, 158, 11, 0.45);
    }
}

.conversation-floating-pill .pill-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #f59e0b;
    color: #1a1a2e;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
}

/* ============================================
   ITEM EDITOR & PERMANENT ITEMS
   ============================================ */

.items-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 16px;
}

.permanent-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 16px;
}

/* Item card actions for permanent items */
.item-card .item-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
    justify-content: flex-end;
}

.item-card .btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.item-card .btn-icon:hover {
    background: var(--color-bg);
    border-color: var(--color-primary);
}

.item-card .btn-icon.btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

.item-card .item-effect {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: var(--color-primary);
    font-style: italic;
}

/* Item Editor Modal */
.item-editor {
    background: var(--color-bg-secondary);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.item-editor .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.item-editor .modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-text);
}

.item-editor .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.item-editor .form-group {
    margin-bottom: 16px;
}

.item-editor .form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
}

.item-editor .form-group input,
.item-editor .form-group textarea,
.item-editor .form-group select {
    width: 100%;
    padding: 10px 14px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-size: 0.95rem;
    font-family: inherit;
}

.item-editor .form-group input:focus,
.item-editor .form-group textarea:focus,
.item-editor .form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.item-editor .form-group textarea {
    resize: vertical;
    min-height: 60px;
}

.item-editor .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.item-editor .form-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.item-editor .error-message {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid #ef4444;
    border-radius: 6px;
    color: #ef4444;
    font-size: 0.9rem;
}

.item-editor .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
}

@media (max-width: 600px) {
    .item-editor .form-row {
        grid-template-columns: 1fr;
    }
    
    .permanent-items-grid {
        grid-template-columns: 1fr;
    }
}

/* === World Version Badge === */
.version-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.65em;
    font-weight: 600;
    vertical-align: middle;
    margin-left: 8px;
    letter-spacing: 0.5px;
}

/* === Session Version Bar === */
.session-version-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 24px;
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85rem;
}

.session-version-label {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.version-up-to-date {
    color: #22c55e;
    font-weight: 500;
}

.upgrade-available {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f59e0b;
    font-weight: 500;
}

.btn-upgrade {
    padding: 4px 14px;
    border-radius: 6px;
    border: 1px solid #f59e0b;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-upgrade:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.3);
}

.btn-upgrade:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === Publish Bar === */
.publish-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    margin: 0 0 16px 0;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
}

.publish-bar-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #f59e0b;
    font-weight: 500;
}

.publish-bar-icon {
    font-size: 1.1rem;
}

.publish-bar-changes {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.publish-bar-changes li {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    padding: 2px 10px;
    border-radius: 12px;
}

.change-type {
    font-weight: 600;
    margin-right: 4px;
}

.change-type.change-added {
    color: #22c55e;
}

.change-type.change-modified {
    color: #3b82f6;
}

.change-type.change-removed {
    color: #ef4444;
}

.btn-publish {
    padding: 8px 20px;
    border-radius: 8px;
    border: none;
    background: #f59e0b;
    color: #000;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-publish:hover:not(:disabled) {
    background: #d97706;
}

.btn-publish:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === Publish Bar Details === */
.publish-bar-details {
    margin: -8px 0 16px 0;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.change-entry {
    background: var(--color-bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.change-entry-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
}

.change-entry-header .change-entity-type {
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
    background: var(--color-bg-secondary);
    padding: 2px 8px;
    border-radius: 10px;
}

.change-entry-header .change-entity-name {
    font-weight: 600;
    color: var(--color-text);
    flex: 1;
}

.btn-revert {
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-revert:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.btn-revert:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.change-fields {
    padding: 0 12px 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-diff {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.78rem;
    padding: 3px 0;
}

.field-name {
    color: var(--color-text-tertiary);
    font-weight: 500;
    min-width: 80px;
    flex-shrink: 0;
}

.field-name::after {
    content: " :";
}

.field-old {
    color: #ef4444;
    text-decoration: line-through;
    opacity: 0.8;
}

.field-arrow {
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.field-new {
    color: #22c55e;
}

.field-badge {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
}

.field-badge.field-added {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.field-badge.field-removed {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Release notes field diffs */
.release-entry {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.release-field-changes {
    padding: 2px 0 6px 28px;
}

.release-field-changes .field-diff {
    font-size: 0.75rem;
}

/* === Release Notes === */
.btn-upgrade-toggle {
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-upgrade-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text);
}

.release-notes {
    padding: 12px 24px 16px;
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border);
    max-height: 250px;
    overflow-y: auto;
}

.release-notes h4 {
    font-size: 0.9rem;
    color: var(--color-text);
    margin: 0 0 12px 0;
    font-weight: 600;
}

.release-section {
    margin-bottom: 10px;
}

.release-section h5 {
    font-size: 0.8rem;
    margin: 0 0 6px 0;
    font-weight: 600;
}

.release-section h5.release-added { color: #22c55e; }
.release-section h5.release-modified { color: #3b82f6; }
.release-section h5.release-removed { color: #ef4444; }

.release-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.release-section li {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    padding: 3px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.change-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.change-badge.added {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.change-badge.modified {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.change-badge.removed {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.entity-type {
    color: var(--color-text-tertiary);
    font-size: 0.7rem;
}

.no-changes {
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
    font-style: italic;
}

/* ========================================
   Story Threads Timeline
   ======================================== */

.story-threads-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.thread-card {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.thread-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.thread-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.thread-title-row h4 {
    margin: 0;
    flex: 1;
    font-size: 1.05rem;
    color: var(--color-text);
}

.thread-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

.thread-status-badge.active {
    background: rgba(76, 175, 80, 0.15);
    color: #4CAF50;
}

.thread-status-badge.paused {
    background: rgba(255, 193, 7, 0.15);
    color: #FFC107;
}

.thread-status-badge.evolved {
    background: rgba(33, 150, 243, 0.15);
    color: #2196F3;
}

.thread-status-badge.abandoned {
    background: rgba(244, 67, 54, 0.15);
    color: #F44336;
}

.thread-priority {
    display: flex;
    gap: 1px;
    font-size: 0.9rem;
}

.priority-star {
    color: var(--color-text-tertiary);
}

.priority-star.filled {
    color: #FFC107;
}

.thread-theme {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

.thread-timeline {
    padding: 16px 20px 20px;
    position: relative;
}

.timeline-step {
    display: flex;
    gap: 14px;
    position: relative;
    min-height: 44px;
}

.timeline-step:not(.last) .timeline-line::after {
    content: '';
    position: absolute;
    left: 11px;
    top: 24px;
    bottom: -8px;
    width: 2px;
    background: var(--color-border);
}

.timeline-line {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    display: flex;
    justify-content: center;
}

.timeline-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    z-index: 1;
    position: relative;
}

.timeline-dot.completed {
    background: #4CAF50;
    color: white;
}

.timeline-dot.inprogress {
    background: #2196F3;
    color: white;
    animation: pulse-dot 2s infinite;
}

.timeline-dot.planned {
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border);
    color: var(--color-text-tertiary);
}

.timeline-dot.skipped {
    background: rgba(244, 67, 54, 0.15);
    border: 2px solid #F44336;
    color: #F44336;
}

.timeline-dot.adapted {
    background: rgba(255, 152, 0, 0.15);
    border: 2px solid #FF9800;
    color: #FF9800;
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(33, 150, 243, 0); }
}

.timeline-content {
    flex: 1;
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.step-description {
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.4;
}

.step-description.strikethrough {
    text-decoration: line-through;
    color: var(--color-text-tertiary);
}

.step-original {
    font-size: 0.78rem;
    color: var(--color-text-tertiary);
    text-decoration: line-through;
    font-style: italic;
}

.step-note {
    font-size: 0.78rem;
    font-style: italic;
    padding: 2px 0;
}

.step-note.adaptation {
    color: #FF9800;
}

.step-note.completion {
    color: #4CAF50;
}

.step-status-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-tertiary);
    font-weight: 600;
}

/* Branch visualization */
.timeline-branch {
    display: flex;
    margin-left: 11px;
    padding-left: 20px;
    position: relative;
}

.timeline-branch::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(33, 150, 243, 0.3);
}

.branch-connector {
    position: absolute;
    left: 0;
    top: 12px;
    width: 20px;
    height: 2px;
    background: rgba(33, 150, 243, 0.3);
}

.branch-steps {
    flex: 1;
}

.timeline-step.branched .timeline-dot {
    width: 20px;
    height: 20px;
    font-size: 0.6rem;
}

.timeline-step.branched .timeline-line::after {
    left: 9px;
}

.timeline-step.branched .step-description {
    font-size: 0.85rem;
}

/* ========================================
   Narrator Tab
   ======================================== */

.narrator-tab {
    padding: 4px 0;
}

.narrator-section {
    margin-bottom: 20px;
}

.narrator-section h4 {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: var(--color-text);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}

.narrator-toggle {
    margin-bottom: 16px;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

.narrator-fields {
    border: none;
    padding: 0;
    margin: 0;
}

.narrator-fields:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.narrator-fields .form-group {
    margin-bottom: 14px;
}

.narrator-fields .form-group label {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    margin-bottom: 5px;
    font-weight: 500;
}

.narrator-fields .form-group input[type="text"],
.narrator-fields .form-group select,
.narrator-fields .form-group textarea {
    width: 100%;
    padding: 8px 12px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 0.9rem;
    font-family: inherit;
}

.narrator-fields .form-group textarea {
    resize: vertical;
}

.narrator-fields .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.focus-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.focus-chip {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.2s;
}

.focus-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-text);
}

.focus-chip.selected {
    background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.15);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.freedom-slider {
    padding: 8px 0;
}

.freedom-slider input[type="range"] {
    width: 100%;
    accent-color: var(--color-primary);
    margin-bottom: 8px;
}

.freedom-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--color-text-tertiary);
}

.freedom-labels span.active {
    color: var(--color-primary);
    font-weight: 600;
}

.freedom-description {
    margin: 8px 0 0;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

.narrator-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.narrator-message {
    margin-top: 12px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
}

.narrator-message.success {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.narrator-message.error {
    background: rgba(244, 67, 54, 0.1);
    color: #F44336;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

/* Narrator config in world definition form */
.narrator-config-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.narrator-config-section > label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
    margin-bottom: 12px;
}

.narrator-form-inline {
    padding: 12px 16px;
    background: var(--color-bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.narrator-form-inline .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.narrator-form-inline .form-group {
    margin-bottom: 8px;
}

/* ========================================
   QUEST SYSTEM STYLES
   ======================================== */

/* --- Quest Inline Pills (chat) --- */

.message-quests {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.quest-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--color-bg-tertiary);
    border: 2px solid var(--color-border);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    margin: 4px 0;
}

.quest-inline:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.quest-inline.quest-accepted {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.quest-inline.quest-refused {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.quest-inline.quest-proposed {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.quest-inline.quest-mandatory {
    border-color: #d97706;
    background: rgba(217, 119, 6, 0.15);
}

.quest-inline.quest-completed {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.quest-inline.quest-failed {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
}

.quest-inline.quest-step-completed {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

.quest-inline .quest-pill-icon {
    font-size: 1.1rem;
}

.quest-inline .quest-pill-summary {
    flex: 1;
    font-size: 0.9rem;
    color: var(--color-text);
    font-weight: 500;
}

.quest-inline .quest-pill-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.quest-inline.quest-accepted .quest-pill-status {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.quest-inline.quest-refused .quest-pill-status {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.quest-inline.quest-proposed .quest-pill-status,
.quest-inline.quest-mandatory .quest-pill-status {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.quest-inline.quest-completed .quest-pill-status {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.quest-inline.quest-failed .quest-pill-status {
    background: rgba(220, 38, 38, 0.2);
    color: #dc2626;
}

.quest-inline.quest-step-completed .quest-pill-status {
    background: rgba(99, 102, 241, 0.2);
    color: #6366f1;
}

.quest-inline .quest-pill-expand {
    opacity: 0.5;
    font-size: 0.9rem;
}

.quest-inline:hover .quest-pill-expand {
    opacity: 1;
}

/* --- Quest Detail Modal --- */

.quest-detail-modal {
    width: min(650px, 90vw);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-secondary);
    border-radius: 12px;
    overflow: hidden;
}

.quest-detail-header-info {
    display: flex;
    gap: 8px;
    padding: 12px 24px 4px;
    flex-wrap: wrap;
}

.quest-type-badge,
.quest-status-badge,
.quest-mandatory-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
}

.quest-type-badge.badge-main {
    background: rgba(217, 119, 6, 0.2);
    color: #f59e0b;
}

.quest-type-badge.badge-side {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

.quest-status-badge.badge-proposed {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.quest-status-badge.badge-active {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.quest-status-badge.badge-completed {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.quest-status-badge.badge-failed {
    background: rgba(220, 38, 38, 0.2);
    color: #dc2626;
}

.quest-status-badge.badge-refused {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

.quest-status-badge.badge-abandoned {
    background: rgba(107, 114, 128, 0.2);
    color: #6b7280;
}

.quest-mandatory-badge {
    background: rgba(217, 119, 6, 0.2);
    color: #d97706;
}

.quest-detail-content {
    overflow-y: auto;
    padding: 24px;
}

.quest-detail-section {
    margin-bottom: 20px;
}

.quest-detail-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.quest-detail-value {
    color: var(--color-text);
    font-size: 0.95rem;
}

.quest-detail-description {
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* --- Quest Steps Timeline --- */

.quest-steps-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 4px;
}

.quest-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    position: relative;
}

.quest-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 28px;
    bottom: -2px;
    width: 2px;
    background: var(--color-border);
}

.quest-step-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    background: var(--color-bg-tertiary);
    border: 2px solid var(--color-border);
}

.quest-step.step-completed .quest-step-dot {
    background: #22c55e;
    border-color: #22c55e;
}

.quest-step.step-active .quest-step-dot {
    background: #6366f1;
    border-color: #6366f1;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
    animation: quest-step-pulse 2s ease-in-out infinite;
}

.quest-step.step-failed .quest-step-dot {
    background: #ef4444;
    border-color: #ef4444;
}

.quest-step.step-skipped .quest-step-dot {
    background: transparent;
    border-color: #6b7280;
    border-style: dashed;
}

.quest-step.step-hidden .quest-step-dot {
    background: transparent;
    border-color: #4b5563;
    border-style: dotted;
}

@keyframes quest-step-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(99, 102, 241, 0.3); }
    50% { box-shadow: 0 0 12px rgba(99, 102, 241, 0.6); }
}

.quest-step.step-completed:not(:last-child)::before {
    background: #22c55e;
}

.quest-step-content {
    flex: 1;
}

.quest-step-description {
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.5;
}

.quest-step.step-completed .quest-step-description {
    color: var(--color-text-secondary);
}

.quest-step.step-skipped .quest-step-description {
    color: var(--color-text-secondary);
    text-decoration: line-through;
}

.quest-step-hidden {
    color: var(--color-text-secondary);
    font-style: italic;
}

.quest-step-meta {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-top: 4px;
}

.quest-step-note {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-style: italic;
    margin-top: 4px;
    padding-left: 8px;
    border-left: 2px solid var(--color-border);
}

/* --- Quest Rewards --- */

.quest-rewards-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quest-reward {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.quest-reward.delivered {
    opacity: 0.6;
}

.quest-reward-icon {
    font-size: 1.1rem;
}

.quest-reward-text {
    flex: 1;
    font-size: 0.9rem;
    color: var(--color-text);
}

.quest-reward-delivered {
    color: #22c55e;
    font-weight: 600;
}

/* --- Quest Journal Modal --- */

.quest-journal-modal {
    width: min(700px, 90vw);
    height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-secondary);
    border-radius: 12px;
    overflow: hidden;
}

.quest-journal-modal .modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    padding: 0 24px;
    background: var(--color-bg-tertiary);
}

.quest-journal-modal .tab {
    padding: 14px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
}

.quest-journal-modal .tab:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.05);
}

.quest-journal-modal .tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-count {
    font-size: 0.75rem;
    background: var(--color-primary);
    color: white;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
}

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

.quest-journal-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 8px;
}

.quest-journal-item:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.quest-journal-item.quest-item-active {
    border-left: 3px solid #22c55e;
}

.quest-journal-item.quest-item-proposed {
    border-left: 3px solid #f59e0b;
}

.quest-journal-item.quest-item-completed {
    border-left: 3px solid #10b981;
    opacity: 0.8;
}

.quest-journal-item.quest-item-failed {
    border-left: 3px solid #ef4444;
    opacity: 0.7;
}

.quest-journal-item.quest-item-refused {
    border-left: 3px solid #6b7280;
    opacity: 0.7;
}

.quest-journal-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quest-journal-icon {
    font-size: 1.2rem;
}

.quest-journal-title {
    flex: 1;
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.95rem;
}

.quest-journal-type-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.quest-journal-type-badge.badge-main {
    background: rgba(217, 119, 6, 0.2);
    color: #f59e0b;
}

.quest-journal-type-badge.badge-side {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

.quest-journal-item-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.quest-journal-giver {
    display: flex;
    align-items: center;
    gap: 4px;
}

.quest-journal-progress {
    margin-left: auto;
}

/* ===== World Lore Page ===== */

.lore-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.lore-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.lore-header h1 {
    margin: 0;
    font-size: 1.8rem;
}

.lore-layout {
    display: flex;
    gap: 24px;
}

.lore-sidebar {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lore-category-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    font-size: 0.9rem;
}

.lore-category-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text);
}

.lore-category-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-primary);
    font-weight: 600;
}

.lore-category-btn .category-icon {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

.lore-category-btn .category-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lore-category-btn .category-count {
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.lore-main {
    flex: 1;
    min-width: 0;
}

.lore-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.lore-search {
    position: relative;
    flex: 1;
    max-width: 300px;
}

.lore-search input {
    width: 100%;
    padding: 8px 32px 8px 12px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 0.85rem;
    font-family: inherit;
}

.lore-search input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.lore-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 2px 6px;
    line-height: 1;
}

.lore-search-clear:hover {
    color: var(--color-text);
}

.lore-form {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.lore-form h3 {
    margin: 0 0 20px 0;
    font-size: 1.2rem;
}

.lore-flags {
    gap: 24px !important;
}

.lore-flags .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.lore-flags .form-hint-inline {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

.lore-entries {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lore-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 16px 20px;
    transition: border-color 0.2s;
}

.lore-card:hover {
    border-color: var(--color-primary);
}

.lore-card.lore-child {
    margin-left: 28px;
    border-left: 3px solid var(--color-border);
}

.lore-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.lore-category-tag {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.lore-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 4px;
}

.lore-badge-constraint {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.lore-badge-core {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.lore-badge-location {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.lore-card-title {
    margin: 0 0 4px 0;
    font-size: 1.05rem;
}

.lore-card-summary {
    margin: 0 0 8px 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
}

.lore-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.lore-tag {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-secondary);
}

.lore-card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.btn-expand {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: all 0.2s;
}

.btn-expand:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.lore-parent-ref {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

.lore-char-count {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    margin-left: auto;
    white-space: nowrap;
}

.lore-card-summary-label,
.lore-card-content-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin-top: 8px;
    margin-bottom: 4px;
}

.lore-card-content {
    margin-top: 4px;
}

.lore-card-content-text {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
    background: rgba(0, 0, 0, 0.15);
    padding: 12px;
    border-radius: 6px;
    max-height: 400px;
    overflow-y: auto;
}

.lore-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 768px) {
    .lore-layout {
        flex-direction: column;
    }

    .lore-sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .lore-card.lore-child {
        margin-left: 12px;
    }
}

/* ===== World Editor (Sidebar Layout) ===== */

.world-editor-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.world-editor-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.world-editor-header h1 {
    margin: 0;
    font-size: 1.8rem;
}

.world-editor-layout {
    display: flex;
    gap: 24px;
}

.world-editor-sidebar {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    width: 100%;
}

.sidebar-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text);
}

.sidebar-item.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-primary);
    font-weight: 600;
}

.sidebar-icon {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-count {
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}

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

.sidebar-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    padding: 4px 14px 2px;
}

.world-editor-main {
    flex: 1;
    min-width: 0;
}

.world-general-form {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 30px;
    max-width: 900px;
}

/* Create World Modal */

.create-world-modal {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    width: 90%;
    max-width: 550px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

.create-world-modal .modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.create-world-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    border-radius: 0 0 12px 12px;
}

.create-world-hint {
    margin-top: 8px;
    padding: 12px 16px;
    background: rgba(124, 92, 255, 0.06);
    border: 1px solid rgba(124, 92, 255, 0.15);
    border-radius: var(--radius);
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .world-editor-layout {
        flex-direction: column;
    }

    .world-editor-sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }

    .sidebar-item {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    .sidebar-divider {
        display: none;
    }

    .sidebar-section-title {
        display: none;
    }

    .world-general-form {
        padding: 20px;
    }
}

/* ===== NPC Lore Traits Editor ===== */

.traits-loading,
.traits-empty {
    padding: 12px;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    text-align: center;
}

.traits-readonly {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
}

.trait-badge-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.trait-badge-label {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.trait-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.trait-badge.trait-knowledge {
    background: rgba(100, 150, 255, 0.1);
    color: #8ab4f8;
}

.traits-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.traits-editor .traits-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.traits-editor .traits-group h4 {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.traits-editor .trait-single,
.traits-editor .trait-multi {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.traits-editor .trait-single label,
.traits-editor .trait-multi label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.traits-editor .custom-value {
    margin-top: 2px;
}

.traits-editor .multi-trait-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.traits-editor .multi-trait-entry {
    display: flex;
    gap: 4px;
    align-items: center;
}

.traits-editor .multi-trait-entry select,
.traits-editor .multi-trait-entry input {
    flex: 1;
    background: var(--color-bg-tertiary, #1a1a1a);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 6px 8px;
    color: var(--color-text);
    font-size: 0.8rem;
    font-family: inherit;
}

.traits-editor .multi-trait-entry select:focus,
.traits-editor .multi-trait-entry input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.traits-editor .btn-remove-trait {
    background: transparent;
    border: 1px solid rgba(220, 53, 69, 0.4);
    color: #ff6b6b;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.traits-editor .btn-remove-trait:hover {
    background: rgba(220, 53, 69, 0.15);
}

.traits-editor .btn-add-trait {
    background: transparent;
    border: 1px dashed var(--color-border);
    color: var(--color-text-secondary);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s;
    align-self: flex-start;
}

.traits-editor .btn-add-trait:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.traits-editor .knowledge-group {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
}

.traits-editor .knowledge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.traits-editor .knowledge-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.traits-editor .knowledge-item label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.traits-editor .knowledge-item select {
    background: var(--color-bg-tertiary, #1a1a1a);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 4px 6px;
    color: var(--color-text);
    font-size: 0.8rem;
    font-family: inherit;
}

.traits-editor .knowledge-item select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.traits-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.traits-success {
    font-size: 0.8rem;
    color: #22c55e;
}

.traits-error {
    font-size: 0.8rem;
    color: #ef4444;
}

.traits-editor .trait-single select,
.traits-editor .trait-single input {
    background: var(--color-bg-tertiary, #1a1a1a);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 6px 8px;
    color: var(--color-text);
    font-size: 0.8rem;
    font-family: inherit;
}

.traits-editor .trait-single select:focus,
.traits-editor .trait-single input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* === Account Modal === */
.account-modal {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    width: 90%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

.account-modal .modal-header {
    border-radius: 16px 16px 0 0;
}

.account-modal .modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.account-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-section h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--color-primary);
    font-weight: 600;
}

.account-divider {
    height: 1px;
    background: var(--color-border);
    margin: 20px 0;
}

.account-field-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.account-field-row .account-input {
    flex: 1;
}

.account-field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-field-group label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.account-input {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    transition: border-color 0.2s;
    width: 100%;
}

.account-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.account-input.input-error {
    border-color: var(--color-accent);
}

.account-input.input-success {
    border-color: #4caf50;
}

.account-field-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.field-error {
    font-size: 0.82rem;
    color: var(--color-accent);
}

.field-success {
    font-size: 0.82rem;
    color: #4caf50;
}

.field-hint {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
    border-radius: 8px;
    white-space: nowrap;
}