/* ═══════════════════════════════════════════════════════
   需求工作台   idea-workbench.css
   布局：左60% 对话 ｜ 右40% 草案，全屏高度（减导航栏）
═══════════════════════════════════════════════════════ */

.idea-wb-page {
    min-height: calc(100vh - 70px);
    position: relative;
    background: linear-gradient(135deg, #e8effd 0%, #f4f8ff 58%, #e7edfb 100%);
    overflow: hidden;
}

.idea-wb-page .bg-layer {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.idea-wb-page .bg-layer-1 {
    width: 30%;
    height: 70%;
    left: 0;
    top: 0;
    opacity: 0.72;
    background: url('/images/price/bg1.png') no-repeat left top;
    background-size: contain;
}

.idea-wb-page .bg-layer-2 {
    width: 30%;
    height: 70%;
    right: 0;
    top: 30%;
    opacity: 0.68;
    background: url('/images/price/bg2.png') no-repeat right center;
    background-size: contain;
}

.idea-wb-page .bg-layer-3 {
    width: 30%;
    height: 50%;
    left: 0;
    bottom: 0;
    opacity: 0.64;
    background: url('/images/price/bg3.png') no-repeat left bottom;
    background-size: cover;
}

.idea-wb-page::after {
    content: none;
}

.idea-wb-shell {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 18px 8px 24px;
}

.idea-wb-layout {
    display: flex;
    gap: 20px;
    padding: 18px;
    min-height: calc(100vh - 150px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.54);
    box-shadow: 0 14px 48px rgba(77, 138, 255, 0.12), 0 2px 14px rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(16px);
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

/* ── 对话面板 ── */
.idea-wb-chat-panel {
    flex: 3;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 18px;
    overflow: hidden;
}

.idea-wb-chat-header {
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: #0256FF;
    border-bottom: 1px solid rgba(77,138,255,0.15);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.idea-wb-status {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 400;
    color: #6b8fb8;
    background: rgba(77,138,255,0.08);
    padding: 2px 10px;
    border-radius: 20px;
}

/* 近期会话（侧栏条，非全量历史） */
.idea-wb-recent-wrap {
    flex-shrink: 0;
    padding: 10px 16px 12px;
    border-bottom: 1px solid rgba(77, 138, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
}

.idea-wb-recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.idea-wb-recent-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
}

.idea-wb-new-session {
    font-size: 0.75rem;
    text-decoration: none !important;
    white-space: nowrap;
}

.idea-wb-recent-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    max-height: 140px;
    padding-right: 2px;
}

.idea-wb-recent-list::-webkit-scrollbar {
    width: 4px;
}

.idea-wb-recent-list::-webkit-scrollbar-thumb {
    background: rgba(77, 138, 255, 0.28);
    border-radius: 2px;
}

.idea-wb-recent-empty {
    padding: 4px 0;
    line-height: 1.4;
}

.idea-wb-recent-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(77, 138, 255, 0.14);
    background: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    color: #1e2d45;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.idea-wb-recent-item:hover {
    border-color: rgba(2, 86, 255, 0.35);
    background: rgba(255, 255, 255, 0.72);
}

.idea-wb-recent-item.is-active {
    border-color: #0256FF;
    background: rgba(2, 86, 255, 0.09);
    box-shadow: 0 0 0 1px rgba(2, 86, 255, 0.12);
}

.idea-wb-recent-item-title {
    display: block;
    font-weight: 600;
    max-width: 100%;
}

.idea-wb-recent-item-meta {
    display: block;
    font-size: 0.68rem;
    color: #64748b;
    margin-top: 2px;
}

/* 消息滚动区 */
.idea-wb-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ideas-wb-messages::-webkit-scrollbar { width: 4px; }
.idea-wb-messages::-webkit-scrollbar-thumb { background: rgba(77,138,255,0.3); border-radius: 2px; }

/* 对话气泡 */
.chat-bubble {
    max-width: 84%;
    display: flex;
}

.chat-bubble--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-bubble--ai {
    align-self: flex-start;
}

.chat-bubble-content {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 0.93rem;
    line-height: 1.65;
    word-break: break-word;
}

.chat-bubble--user .chat-bubble-content {
    background: linear-gradient(135deg, #4d8aff, #0256FF);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-bubble--ai .chat-bubble-content {
    background: rgba(255,255,255,0.75);
    color: #1e2d45;
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(77,138,255,0.15);
    backdrop-filter: blur(8px);
}

/* 输入栏 */
.idea-wb-input-bar {
    padding: 14px 16px;
    border-top: 1px solid rgba(77,138,255,0.12);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.idea-wb-textarea {
    width: 100%;
    border: 1.5px solid rgba(77,138,255,0.3);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.93rem;
    resize: none;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(6px);
    color: #1e2d45;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}

.idea-wb-textarea:focus {
    border-color: #4d8aff;
}

.idea-wb-input-actions {
    display: flex;
    justify-content: flex-end;
}

.idea-wb-send-btn {
    background: linear-gradient(135deg, #4d8aff, #6ecbff);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 22px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.idea-wb-send-btn:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
.idea-wb-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── 草案面板 ── */
.idea-wb-draft-panel {
    flex: 2;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    max-width: 420px;
    border-radius: 18px;
    overflow: hidden;
}

.idea-wb-draft-header {
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: #0256FF;
    border-bottom: 1px solid rgba(77,138,255,0.15);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.draft-version-badge {
    margin-left: auto;
    font-size: 0.73rem;
    font-weight: 500;
    color: #fff;
    background: #4d8aff;
    padding: 1px 9px;
    border-radius: 20px;
}

/* 空状态 */
.draft-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8ba3c7;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
}

.draft-empty-state .portal-icon {
    width: 2.8rem;
    height: 2.8rem;
    color: #c0d2f0;
}

.draft-empty-state p {
    font-size: 0.88rem;
    line-height: 1.6;
}

/* 草案内容区 */
.draft-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.draft-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.draft-field--half {
    flex: 1;
}

.draft-row {
    display: flex;
    gap: 12px;
}

.draft-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #4d8aff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.draft-field-value {
    font-size: 0.88rem;
    color: #1e2d45;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(77,138,255,0.13);
    border-radius: 8px;
    padding: 8px 12px;
    min-height: 32px;
    line-height: 1.55;
    white-space: pre-line;
}

/* 操作按钮栏 */
.draft-actions {
    padding: 14px 16px;
    border-top: 1px solid rgba(77,138,255,0.12);
    flex-shrink: 0;
    gap: 10px;
    justify-content: flex-end;
}

/* 未登录提示条 */
.idea-wb-login-hint {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.9rem;
    color: #2c3d5a;
    background: rgba(77, 138, 255, 0.12);
    border: 1px solid rgba(77, 138, 255, 0.28);
}

.idea-wb-login-hint .btn {
    flex-shrink: 0;
}

.idea-wb-textarea:disabled {
    cursor: not-allowed;
    opacity: 0.72;
    background: rgba(255, 255, 255, 0.5);
}

/* 商品选择弹窗 */
.idea-wb-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.idea-wb-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 35, 60, 0.45);
    backdrop-filter: blur(2px);
}

.idea-wb-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 18px 48px rgba(30, 60, 120, 0.2);
    border: 1px solid rgba(111, 156, 238, 0.25);
}

/* 选择商品/软件种类：实心面板，不透底 */
.idea-wb-modal__dialog.idea-wb-modal__dialog--opaque {
    background: #f2f5fc;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-height: 0;
    margin: 0;
    display: block;
    overflow: visible;
}

.idea-wb-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.idea-wb-modal__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: #1a2b4a;
}

.idea-wb-modal__close {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: #6b7a95;
    cursor: pointer;
    padding: 0 4px;
}

.idea-wb-modal__hint {
    margin-bottom: 10px;
    line-height: 1.5;
}

.idea-wb-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.idea-wb-suggestions {
    max-height: 120px;
    overflow-y: auto;
}

/* ── 响应式：移动端垂直堆叠 ── */
@media (max-width: 768px) {
    .idea-wb-page::after { display: none; }

    .idea-wb-layout {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 70px);
        padding: 12px;
        border-radius: 18px;
    }

    .idea-wb-draft-panel {
        max-width: 100%;
        min-height: 300px;
    }

    .idea-wb-chat-panel {
        min-height: 60vh;
    }
}