/* The Crossroads Effigy Styles */
.bot-icon-container {
    position: fixed;
    top: 0; /* Hang from the top now, like a gallows */
    right: 50px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

/* Panel: transparent so only text is visible; blends into page */
.effigy-panel {
    position: absolute;
    top: 85px;
    right: 78px;
    width: 220px;
    max-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 1.2s ease, transform 1.2s ease;
    background: transparent;
    border: none;
}

.bot-icon-container:hover .effigy-panel {
    opacity: 1;
    transform: translateY(0);
}

/* Result area: fixed height, scroll, FIFO lines; top fades into mask */
.effigy-result-list {
    max-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    color: #888;
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.9rem;
    font-style: italic;
    letter-spacing: 0.03em;
    line-height: 1.45;
    padding: 6px 8px;
    border: none;
    border-radius: 0;
    background: transparent;
    /* Top fade: lines gradually disappear as they move up (FIFO) */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.4) 10px, black 28px);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.4) 10px, black 28px);
    /* Hide scrollbar, keep scroll */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.effigy-result-list::-webkit-scrollbar {
    display: none;
}

/* When empty: hide the bar so only whisper + input show until first response */
.effigy-result-list:has(.effigy-result-list-inner:empty) {
    max-height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: none;
    overflow: hidden;
    background: transparent;
}

.effigy-result-list-inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.effigy-result-line {
    color: #999;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Input row */
.effigy-input-wrap {
    display: flex;
    gap: 6px;
    align-items: center;
}

.effigy-input-wrap input {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.9rem;
    color: #aaa;
    background: transparent;
    border: none;
    border-radius: 2px;
    outline: none;
}

.effigy-input-wrap input::placeholder {
    color: #666;
}

.effigy-input-wrap input:focus {
    color: #ccc;
}

.effigy-input-wrap button,
#effigy-send-btn {
    padding: 6px 10px;
    color: #888;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    outline: none;
    cursor: pointer;
    transition: color 0.2s;
    appearance: none;
}

.effigy-input-wrap button:hover,
#effigy-send-btn:hover {
    color: #aaa;
    background: transparent !important;
}

.bot-icon {
    width: 60px;
    height: 180px;
    pointer-events: auto; /* Only the body is hoverable */
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><text x="0" y="14" font-size="14">👁️</text></svg>'), auto;
    opacity: 0.18; /* Nearly hidden when not hovering — ghost at the crossroads */
    /* Pendulum physics originating from above the screen */
    transform-origin: 50% -50px; 
    animation: dead-sway 8s ease-in-out infinite;
    transition: filter 1s ease, opacity 1s ease;
    filter: drop-shadow(0 20px 15px rgba(0,0,0,0.8));
}

.droplet-shape {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Hover: become clearly visible + whisper shows */
.bot-icon:hover {
    opacity: 0.88;
    filter: drop-shadow(0 0 1px rgba(70,58,48,0.5)) drop-shadow(0 20px 20px rgba(0,0,0,0.9)) brightness(0.9);
}

/* Whisper moved into input placeholder; this slot is hidden to avoid duplicate */
.whisper-box {
    display: none;
}

/* The lifess, irregular sway of a heavy wet object */
@keyframes dead-sway {
    0% { transform: rotate(-3deg); }
    40% { transform: rotate(4deg); }
    75% { transform: rotate(-1deg); }
    100% { transform: rotate(-3deg); }
}