/* ===== Chat Styles - Chat Container, Messages, Input ===== */

/* Chat container */
.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 1000px;
    margin: 0 auto 1.5rem auto;
    padding-top: 1.5rem;
    width: 100%;
    background: linear-gradient(135deg,
            var(--parchment) 0%,
            var(--parchment-dark) 50%,
            var(--parchment-accent) 100%);
    border-radius: 0;
    box-shadow: 10px 10px 0 rgba(92, 64, 51, 0.4);
    overflow: hidden;
    min-height: 80vh;
    height: auto;
    border: 6px solid var(--brown-dark);
    /* Pixel serrated border effect */
    clip-path: polygon(0 8px,
            8px 8px,
            8px 0,
            calc(100% - 8px) 0,
            calc(100% - 8px) 8px,
            100% 8px,
            100% calc(100% - 8px),
            calc(100% - 8px) calc(100% - 8px),
            calc(100% - 8px) 100%,
            8px 100%,
            8px calc(100% - 8px),
            0 calc(100% - 8px));
    /* GPU acceleration to prevent rendering artifacts during sidebar resize */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Wide screen chat container (1280px - 1439px) */
@media (min-width: 1280px) and (max-width: 1439px) {
    .chat-container {
        max-width: none;
        margin: 0 2rem 1.5rem 2rem;
        padding-top: 1.5rem;
        flex: 1;
    }
}

/* Ultra-wide screen chat container (>=1440px) */
@media (min-width: 1440px) {
    .chat-container {
        max-width: 1200px;
        margin: 0 auto 1.5rem auto;
        padding-top: 1.5rem;
        flex: 1;
    }
}

/* Quick actions area */
.quick-actions {
    padding: 1rem 1.5rem;
    border-bottom: none;
    background: transparent;
}

.quick-actions h3 {
    color: var(--brown-dark);
    font-size: 1rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.preset-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Messages area */
.messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 400px;
    background: linear-gradient(180deg,
            var(--parchment) 0%,
            var(--parchment-dark) 100%);
    position: relative;
}

/* Messages area decoration - parchment texture */
.messages::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(rgba(139, 115, 85, 0.02) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(139, 115, 85, 0.02) 1px,
            transparent 1px);
    background-size: 8px 8px;
    opacity: 0.3;
    pointer-events: none;
}

/* Message base style */
.message {
    max-width: 85%;
    padding: 1rem 1.25rem;
    border-radius: 0;
    line-height: 1.6;
    animation: messageSlideIn 0.3s ease-out;
    word-wrap: break-word;
    min-height: 20px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* User message */
.message.user {
    align-self: flex-end;
    background: linear-gradient(180deg, #fff8f0 0%, #faebd7 100%);
    color: #d4976a;
    border: none;
    white-space: pre-line;
    font-size: 0.95rem;
    clip-path: var(--pixel-corners-user);
    position: relative;
    padding: 1.25rem 1.5rem;
    /* RPG style multi-layer shadow - pixel stair effect */
    box-shadow:
        /* Layer 1 - deep outer shadow (8-bit style) */
        4px 4px 0 0 #5b3a29,
        /* Layer 2 - stair shadow extension */
        6px 6px 0 0 #5b3a29,
        8px 8px 0 0 #5b3a29;
}

/* RPG dialog box multi-layer border */
.message.user::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 3px solid #a47858;
    /* Medium brown border */
    clip-path: var(--pixel-corners-user);
    pointer-events: none;
}

.message.user::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid #5b3a29;
    /* Deep brown outer frame */
    clip-path: var(--pixel-corners-user);
    pointer-events: none;
}

/* Assistant message */
.message.assistant {
    align-self: flex-start;
    background: linear-gradient(180deg, #fffef9 0%, #f7ede3 100%);
    color: var(--brown-dark);
    border: none;
    font-size: 0.95rem;
    clip-path: var(--pixel-corners-large);
    position: relative;
    padding: 1.25rem 1.5rem;
    /* RPG style multi-layer shadow - pixel stair effect */
    box-shadow:
        /* Layer 1 - deep outer shadow */
        4px 4px 0 0 #5b3a29,
        /* Layer 2 - stair shadow extension */
        6px 6px 0 0 #5b3a29,
        8px 8px 0 0 #5b3a29;
}

/* RPG dialog box multi-layer border - inner light highlight */
.message.assistant::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 3px solid #a47858;
    /* Medium brown border */
    clip-path: var(--pixel-corners-large);
    pointer-events: none;
}

/* Outer deep border */
.message.assistant::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid #5b3a29;
    /* Deep brown outer frame */
    clip-path: var(--pixel-corners-large);
    pointer-events: none;
}

/* Markdown styles for assistant messages */
.message.assistant h1,
.message.assistant h2,
.message.assistant h3 {
    margin: 0.5rem 0;
    color: var(--brown-dark);
    font-weight: 700;
}

.message.assistant h1 {
    font-size: 1.1rem;
    border-bottom: 4px solid var(--brown-dark);
    padding-bottom: 0.25rem;
}

.message.assistant h2 {
    font-size: 0.95rem;
    border-bottom: 3px solid var(--brown-dark);
    padding-bottom: 0.25rem;
}

.message.assistant h3 {
    font-size: 0.85rem;
}

.message.assistant code {
    background: var(--parchment);
    color: var(--brown-dark);
    padding: 0.125rem 0.35rem;
    border-radius: 0;
    border: 2px solid var(--brown-dark);
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 0.8em;
}

.message.assistant pre {
    background: var(--brown-dark);
    color: var(--grass-light);
    padding: 1rem;
    border-radius: 0;
    border: 4px solid var(--brown-dark);
    overflow-x: auto;
    margin: 0.5rem 0;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 0.8em;
    line-height: 1.4;
    box-shadow: 6px 6px 0 rgba(92, 64, 51, 0.5);
}

.message.assistant pre code {
    background: none;
    color: inherit;
    padding: 0;
    border: none;
}

.message.assistant strong {
    font-weight: 700;
    color: var(--brown-dark);
}

.message.assistant em {
    font-style: italic;
    color: var(--brown-light);
}

.message.assistant a {
    color: var(--blue);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid var(--blue);
}

.message.assistant a:hover {
    color: var(--blue-light);
    background: #dbeafe;
}

/* Tool message */
.message.tool {
    align-self: center;
    background: linear-gradient(180deg,
            var(--grass) 0%,
            var(--grass-dark) 100%);
    color: white;
    font-size: 0.8rem;
    max-width: 90%;
    border: 4px solid var(--brown-dark);
    box-shadow: 6px 6px 0 rgba(92, 64, 51, 0.5);
}

/* Warning message */
.message.warning {
    align-self: center;
    background: linear-gradient(180deg,
            var(--orange-light) 0%,
            var(--orange) 100%);
    color: white;
    font-size: 0.8rem;
    max-width: 95%;
    border: 4px solid var(--brown-dark);
    box-shadow: 6px 6px 0 rgba(92, 64, 51, 0.5);
    border-left: 8px solid var(--orange-dark);
}

/* Error message */
.message.error {
    align-self: center;
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    color: white;
    font-size: 0.8rem;
    max-width: 95%;
    border: 4px solid var(--brown-dark);
    box-shadow: 6px 6px 0 rgba(92, 64, 51, 0.5);
}

/* Input area */
.input-area {
    padding: 1.5rem;
    border-top: 6px solid var(--brown-dark);
    background: linear-gradient(180deg,
            var(--parchment) 0%,
            var(--parchment-dark) 100%);
}

.input-container {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    position: relative;
}

/* Voice button */
.voice-button {
    width: 56px;
    height: 56px;
    background: linear-gradient(180deg, var(--orange-light) 0%, var(--orange) 100%);
    border: 3px solid var(--brown-dark);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 4px 4px 0 rgba(92, 64, 51, 0.5);
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
}

.voice-button::before {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'%3E%3C/path%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'%3E%3C/path%3E%3Cline x1='12' y1='19' x2='12' y2='23'%3E%3C/line%3E%3Cline x1='8' y1='23' x2='16' y2='23'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    z-index: 1;
}

.voice-button::after {
    content: "";
    display: none;
}

.voice-button:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 rgba(92, 64, 51, 0.5);
    background: linear-gradient(180deg, #FFAB5C 0%, var(--orange-light) 100%);
}

.voice-button:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

/* Recording state */
.voice-button.recording {
    background: #ff1a1a;
    animation: recordPulse 1s ease-in-out infinite;
}

.voice-button.recording::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' stroke='white' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='8'%3E%3C/circle%3E%3C/svg%3E");
}

.voice-button.recording::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid rgba(255, 59, 59, 0.6);
    animation: ripple 1.2s ease-out infinite;
    z-index: 0;
}

@keyframes recordPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Recording status text */
.recording-status {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: 600;
    color: #ff4444;
    display: none;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    z-index: 100;
}

.recording-status.active {
    display: flex;
}

.recording-time {
    font-family: monospace;
    font-size: 16px;
    color: #1e5aa8;
    background: #e8f4fd;
    padding: 4px 8px;
    border: 2px solid #1e5aa8;
}

.recording-dot {
    width: 12px;
    height: 12px;
    background: #ff4444;
    border-radius: 50%;
    animation: blink 0.5s step-end infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Processing state */
.voice-button.processing {
    background: #888;
    cursor: not-allowed;
}

.voice-button.processing::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'%3E%3C/polyline%3E%3Cpolyline points='1 20 1 14 7 14'%3E%3C/polyline%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'%3E%3C/path%3E%3C/svg%3E");
    animation: spin 1s linear infinite;
}

.voice-button.processing::after {
    display: none;
}

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

/* Autocomplete styles */
.autocomplete-container {
    position: relative;
    flex: 1;
    display: flex;
}

.autocomplete-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    background: var(--parchment);
    border: 4px solid var(--brown-dark);
    border-radius: 0;
    margin-bottom: 0.5rem;
    box-shadow: 8px -8px 0 rgba(92, 64, 51, 0.5);
    z-index: 1000;
    display: none;
}

.autocomplete-dropdown.show {
    display: block;
}

.autocomplete-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.1s ease;
    border-bottom: 3px solid var(--brown-dark);
    font-size: 0.8rem;
    color: var(--brown-dark);
    font-weight: 600;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover {
    background: var(--orange);
    color: white;
}

.autocomplete-item.selected {
    background: var(--blue);
    color: white;
}

.autocomplete-highlight {
    font-weight: 700;
    color: #dc2626;
}

/* Message input */
.message-input {
    flex: 1;
    padding: 1rem 1.25rem;
    border: none;
    border-radius: 0;
    outline: none;
    font-size: 0.95rem;
    transition: all 0.1s ease;
    background: linear-gradient(180deg,
            white 0%,
            var(--parchment) 100%);
    resize: none;
    min-height: 50px;
    max-height: 120px;
    font-family: inherit;
    box-shadow: inset 3px 3px 6px rgba(92, 64, 51, 0.2);
    color: var(--brown-dark);
    clip-path: var(--pixel-corners);
    position: relative;
}

.message-input:focus {
    background: white;
    box-shadow: inset 3px 3px 6px rgba(92, 64, 51, 0.2),
        0 0 0 3px var(--orange);
}

/* Input box outer frame */
.autocomplete-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid var(--brown-dark);
    clip-path: var(--pixel-corners);
    pointer-events: none;
}

.button-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}

/* Character GIF - standing above send button */
.input-character {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 4px);
    transform: translateX(-50%);
    width: 80px;
    height: auto;
    z-index: 10;
    pointer-events: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(2px 2px 0 rgba(92, 64, 51, 0.3));
}

/* Character fade out animation */
.input-character.fade-out {
    animation: characterFadeOut 0.5s ease-out forwards;
}

@keyframes characterFadeOut {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}

/* Typing indicator */
.typing {
    align-self: flex-start;
    background: linear-gradient(180deg,
            var(--parchment) 0%,
            var(--parchment-dark) 100%);
    color: var(--brown-light);
    font-style: normal;
    font-weight: 600;
    border: 4px solid var(--brown-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 6px 6px 0 rgba(92, 64, 51, 0.4);
}

.typing-dots {
    display: inline-flex;
    gap: 0.35rem;
}

.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: var(--orange);
    animation: pixelTyping 1s infinite ease-in-out;
}

.typing-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
    animation-delay: -0.16s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0s;
}

/* Typewriter cursor effect */
.typewriter-cursor::after {
    content: "\u258c";
    opacity: 1;
    animation: pixelBlink 0.6s infinite;
    color: var(--orange);
    font-weight: bold;
}

/* Thinking process styles */
.thinking-process {
    margin: 15px 0;
    padding: 0;
    background: linear-gradient(180deg,
            var(--parchment) 0%,
            var(--parchment-dark) 100%);
    border: 4px solid var(--brown-dark);
    border-radius: 0;
    font-size: 0.8rem;
    color: var(--brown-dark);
    overflow: hidden;
    animation: messageSlideIn 0.3s ease-out;
    max-width: 90%;
    align-self: flex-start;
    flex-shrink: 0;
    box-shadow: 6px 6px 0 rgba(92, 64, 51, 0.5);
}

.thinking-header {
    background: linear-gradient(180deg,
            var(--orange-light) 0%,
            var(--orange) 100%);
    padding: 12px 16px;
    font-weight: 700;
    border-bottom: 4px solid var(--brown-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.1s ease;
    user-select: none;
    color: white;
}

.thinking-header:hover {
    background: linear-gradient(180deg,
            #ffab5c 0%,
            var(--orange-light) 100%);
}

.thinking-header .toggle-icon {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
    color: white;
}

.thinking-steps {
    padding: 12px 16px;
}

.thinking-step {
    margin: 8px 0;
    padding: 10px 12px;
    background: white;
    border-radius: 0;
    border: 3px solid var(--brown-dark);
    border-left: 6px solid var(--orange);
    line-height: 1.5;
    animation: fadeInStep 0.4s ease-out;
    box-shadow: 3px 3px 0 rgba(92, 64, 51, 0.3);
}

/* Tool execution result styles */
.tool-execution {
    margin: 15px 0;
    border: 4px solid var(--brown-dark);
    border-radius: 0;
    overflow: hidden;
    animation: messageSlideIn 0.3s ease-out;
    max-width: 90%;
    align-self: flex-start;
    background: white;
    box-shadow: 6px 6px 0 rgba(92, 64, 51, 0.5);
    min-height: 60px;
    flex-shrink: 0;
}

.tool-header {
    background: linear-gradient(180deg,
            var(--parchment) 0%,
            var(--parchment-dark) 100%);
    padding: 14px 18px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: var(--brown-dark);
    transition: all 0.1s ease;
    user-select: none;
    min-height: 52px;
    border-bottom: 4px solid var(--brown-dark);
}

.tool-header:hover {
    background: linear-gradient(180deg,
            var(--parchment-dark) 0%,
            var(--parchment-accent) 100%);
}

.tool-header.executing {
    background: linear-gradient(180deg,
            var(--orange-light) 0%,
            var(--orange) 100%);
    color: white;
}

.tool-header.completed {
    background: linear-gradient(180deg,
            var(--grass-light) 0%,
            var(--grass) 100%);
    color: white;
}

.tool-header.error {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.tool-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
}

.tool-toggle {
    font-size: 16px;
    transition: transform 0.2s ease;
    color: inherit;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 0;
    user-select: none;
    font-weight: 700;
}

.tool-toggle:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.tool-toggle.expanded {
    transform: rotate(180deg);
}

.tool-content {
    overflow-y: auto;
    max-height: 600px;
    background: var(--parchment);
    padding: 16px;
}

.tool-result {
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 0.75rem;
    white-space: pre-wrap;
    background: var(--brown-dark);
    color: var(--grass-light);
    padding: 16px;
    border-radius: 0;
    border: 3px solid var(--brown-dark);
    line-height: 1.4;
    max-height: 550px;
    min-height: 150px;
    overflow-y: auto;
    word-wrap: break-word;
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4);
}

.tool-result-item {
    margin-bottom: 12px;
    padding: 12px;
    border: 3px solid var(--brown-dark);
    border-left: 6px solid var(--grass);
    background: linear-gradient(180deg,
            var(--parchment) 0%,
            var(--parchment-dark) 100%);
    border-radius: 0;
    min-height: 60px;
}

.tool-result-item.error {
    border-left-color: #dc2626;
    background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%);
}

.tool-result-item.executing {
    border-left-color: var(--orange);
    background: linear-gradient(180deg,
            var(--parchment) 0%,
            var(--parchment-dark) 100%);
}

/* Tool result image style */
.tool-result-image {
    position: relative;
    display: block !important;
    margin: 16px auto !important;
    padding: 12px !important;
    background: linear-gradient(135deg, #f5ece3 0%, #efe3d6 100%) !important;
    border: 4px solid #5c4033 !important;
    box-shadow: 6px 6px 0 rgba(92, 64, 51, 0.4), inset 0 0 0 2px #8b7355 !important;
    transition: all 0.2s ease !important;
    width: fit-content !important;
    max-width: 100% !important;
}

.tool-result-image:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 8px 8px 0 rgba(92, 64, 51, 0.5), inset 0 0 0 2px #ff8c42 !important;
    background: linear-gradient(135deg, #fff8f0 0%, #f5ece3 100%) !important;
}

.tool-result-image img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    border: 2px solid #5c4033 !important;
    cursor: default !important;
    transition: all 0.2s ease !important;
}

.result-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.7rem;
    color: var(--brown-light);
    font-weight: 600;
}

.result-timestamp {
    font-family: monospace;
    background: var(--brown-dark);
    color: var(--grass-light);
    padding: 2px 6px;
    border-radius: 0;
    border: 2px solid var(--brown-dark);
}

.result-status {
    background: var(--blue);
    color: white;
    padding: 2px 6px;
    border-radius: 0;
    font-size: 0.65rem;
    text-transform: uppercase;
    border: 2px solid var(--brown-dark);
}

.result-content {
    margin-top: 8px;
    padding: 8px;
    background: white;
    border-radius: 0;
    border: 2px solid var(--brown-dark);
    min-height: 40px;
}

.tool-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--brown-light);
    font-style: italic;
}

.tool-id {
    font-size: 0.6rem;
    color: var(--brown-light);
    margin-left: 8px;
}

/* Book cover container style */
.library-book-cover {
    position: relative;
    display: block !important;
    margin: 16px 0 !important;
    padding: 8px;
    box-shadow: inset 0 0 0 2px var(--brown-light);
    transition: all 0.2s ease;
    width: fit-content !important;
    max-width: 100%;
}

.library-book-cover img {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: auto;
}

.library-book-cover:hover {
    box-shadow: inset 0 0 0 2px var(--orange);
}

/* Size variants */
.library-book-cover.size-small {
    padding: 6px;
    box-shadow: inset 0 0 0 1px var(--brown-light);
}

.library-book-cover.size-small img {
    max-width: 80px;
}

.library-book-cover.size-medium {
    padding: 8px;
}

.library-book-cover.size-medium img {
    max-width: 128px;
}

.library-book-cover.size-large {
    padding: 12px;
    box-shadow: inset 0 0 0 3px var(--brown-light);
}

.library-book-cover.size-large img {
    max-width: 192px;
}

/* Default image style (when no cover) */
.library-book-cover.no-cover {
    background: linear-gradient(135deg,
            var(--parchment-dark) 0%,
            #d4c4b0 100%);
}

.library-book-cover.no-cover img {
    opacity: 0.6;
}

.library-book-cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 192px;
    background: linear-gradient(135deg,
            var(--parchment-dark) 0%,
            #d4c4b0 100%);
    color: var(--brown-dark);
    font-size: 48px;
}

.library-book-cover.loading {
    animation: bookCoverFadeIn 0.4s ease-out;
}

.library-book-cover.clickable {
    cursor: default;
}