/**
 * Liora Explore Panel Styles
 * Extracted from templates/index.html (lines 1916-2649)
 */

/* ============================================

   業追求面æ 板 - 节点交äº'é¿”

   ============================================ */

.explore-node-card {

    background: var(--color-bg);

    border: 1px solid var(--color-border-light);

    margin-bottom: 16px;

}



.node-card-header {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 16px;

    background: var(--color-bg-secondary);

    border-bottom: 1px solid var(--color-border-light);

}



.node-card-avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: var(--color-memory);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

    font-weight: 600;

    flex-shrink: 0;

}



.node-card-info {

    flex: 1;

    min-width: 0;

}



.node-card-name {

    font-size: 15px;

    font-weight: 600;

    color: var(--color-text);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.node-card-type {

    font-size: 11px;

    color: var(--color-memory);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-top: 2px;

}



.node-card-body {

    padding: 12px 16px;

}



.node-meta-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 6px 0;

    font-size: 12px;

}



.meta-label {

    color: var(--color-text-secondary);

}



.meta-value {

    font-weight: 600;

    color: var(--color-text);

    font-family: var(--font-mono);

}



/* 问答区域 */

.explore-chat-section {

    border: 1px solid var(--color-border-light);

    background: var(--color-bg);

    margin-bottom: 16px;

    display: flex;

    flex-direction: column;

    height: 320px;

}



.chat-header {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 12px;

    background: var(--color-bg-secondary);

    border-bottom: 1px solid var(--color-border-light);

    font-size: 12px;

    font-weight: 600;

    color: var(--color-text-secondary);

}



.chat-messages {

    flex: 1;

    overflow-y: auto;

    padding: 12px;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.chat-empty {

    text-align: center;

    padding: 40px 20px;

    color: var(--color-text-secondary);

}



.chat-empty .empty-icon {

    margin-bottom: 12px;

    opacity: 0.3;

}



.chat-empty .empty-text {

    font-size: 12px;

    line-height: 1.6;

}



.typing-indicator {

    font-size: 12px;

    color: var(--color-text-secondary);

    font-style: italic;

}



.chat-message {

    display: flex;

    gap: 8px;

    max-width: 90%;

}



.chat-message.user {

    align-self: flex-end;

    flex-direction: row-reverse;

}



.chat-message.assistant {

    align-self: flex-start;

}



.message-avatar {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: var(--color-bg-tertiary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 11px;

    font-weight: 600;

    color: var(--color-text-secondary);

    flex-shrink: 0;

}



.chat-message.user .message-avatar {

    background: var(--color-memory);

    color: #fff;

}



.message-content {

    background: var(--color-bg-secondary);

    padding: 10px 12px;

    border-radius: 4px;

    font-size: 13px;

    line-height: 1.5;

    border: 1px solid var(--color-border-light);

}



.chat-message.user .message-content {

    background: var(--color-memory-light);

    border-color: var(--color-memory-light);

}



.chat-input-area {

    display: flex;

    gap: 8px;

    padding: 10px;

    border-top: 1px solid var(--color-border-light);

    background: var(--color-bg);

}



.chat-input {

    flex: 1;

    padding: 10px 12px;

    border: 1px solid var(--color-border-light);

    font-size: 13px;

    font-family: var(--font-sans);

    outline: none;

    resize: none;

    background: var(--color-bg);

}



.chat-input:focus {

    border-color: var(--color-memory);

}



.send-btn {

    width: 40px;

    height: 40px;

    border: 1px solid var(--color-border-light);

    background: var(--color-bg);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-text-secondary);

    transition: all 0.2s ease;

}



.send-btn:hover:not(:disabled) {

    background: var(--color-memory);

    color: #fff;

    border-color: var(--color-memory);

}



.send-btn:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



/* 快捷提示 */

.explore-quick-prompts {

    padding: 4px 0;

}



.quick-title {

    font-size: 10px;

    font-weight: 600;

    color: var(--color-text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 10px;

}



.quick-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.quick-tag {

    padding: 6px 12px;

    border: 1px solid var(--color-border-light);

    background: var(--color-bg);

    font-size: 12px;

    cursor: pointer;

    transition: all 0.2s ease;

    color: var(--color-text);

    font-family: var(--font-sans);

}



.quick-tag:hover {

    border-color: var(--color-memory);

    color: var(--color-memory);

    background: var(--color-memory-light);

}



/* 关系路径探索 */

.explore-path-finder {

    border: 1px solid var(--color-border-light);

    padding: 12px;

    background: var(--color-bg-secondary);

}



.path-finder-body {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.path-finder-box {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    padding: 16px;

    border: 1px solid var(--color-border-light);

    border-radius: 8px;

    background: var(--color-bg);

}



.path-from-to {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    font-size: 12px;

    padding: 8px;

    background: var(--color-bg);

    border: 1px dashed var(--color-border-light);

}



.path-from-to .path-arrow {

    color: var(--color-memory);

    font-size: 16px;

}



.btn-find-path, .btn-story {

    width: 100%;

    padding: 10px;

    border: 1px solid var(--color-memory);

    background: var(--color-memory);

    color: #fff;

    font-size: 12px;

    cursor: pointer;

    transition: all 0.2s ease;

}



.btn-find-path:hover, .btn-story:hover {

    background: var(--color-bg);

    color: var(--color-memory);

}



.btn-find-path:disabled, .btn-story:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



.path-result, .story-result {

    margin-top: 12px;

    padding: 12px;

    background: var(--color-bg);

    border-left: 3px solid var(--color-memory);

    font-size: 13px;

    line-height: 1.6;

    display: none;

}



.path-result.show, .story-result.show {

    display: block;

}



.path-step {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    padding: 6px 0;

    border-bottom: 1px dashed var(--color-border-light);

}



.path-step:last-child {

    border-bottom: none;

    margin-bottom: 0;

}



.path-step-num {

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: var(--color-memory);

    color: #fff;

    font-size: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.path-step-text {

    flex: 1;

}