/* ---------- 通用 CSS（复制到每个 HTML） ---------- */
html {
    font-size: 16px;   /* 标准字体大小 */
    height: 100%;
    overflow: hidden;
}
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: linear-gradient(145deg, #f0f7ff 0%, #e9f0fa 100%);
    color: #1a2c3e;
    height: 100%;
    overflow: hidden;
}

/* ---- 版面容器 ---- */
.app-container {
    display: flex;
    gap: 32px;
    height: 100%;
    overflow: hidden;
    padding: 24px 32px;
}

/* ---- 左侧功能栏 ---- */
.innovation-sidebar {
    flex: 0 0 320px;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(2px);
    border-radius: 36px;
    box-shadow: 0 20px 35px -12px rgba(0,0,0,.08),
                0 1px 2px rgba(0,0,0,.02);
    border: 1px solid rgba(66,153,225,.2);
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    overflow: hidden;
}

/* ---- 品牌区 ---- */
.brand {display:flex;align-items:center;gap:12px;
         border-bottom:2px solid rgba(0,112,243,.2);
         padding-bottom:20px;}
.brand-icon{background:linear-gradient(135deg,#0070f3,#00c6fb);
            width:48px;height:48px;border-radius:24px;
            display:flex;align-items:center;justify-content:center;
            font-size:26px;color:#fff;
            box-shadow:0 8px 14px -6px rgba(0,112,243,.4);}
.brand h1{font-size:1.6rem;font-weight:700;
         background:linear-gradient(120deg,#0b2b44,#0066cc);
         -webkit-background-clip:text;color:transparent;
         letter-spacing:-0.3px;}
.brand p{font-size:.75rem;color:#4a627a;margin-top:4px;}

/* ---- 功能卡片区域 ---- */
.features-collapsible{
    flex: 1;
    min-height: 0;
    background:rgba(255,255,255,.3);
    border-radius:24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.features-header{
    display:flex;justify-content:space-between;align-items:center;
    cursor:pointer;padding:12px 16px;
    background:rgba(255,255,255,.5);
    border-radius:24px;font-weight:600;color:#2c4b6e;
    transition:.2s;
}
.features-header:hover{background:rgba(255,255,255,.8);}
.features-header i{transition:.2s;}
.innovation-list{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    transition:max-height .3s ease-out,padding .2s;
    padding:12px 0;
    display:flex;
    flex-direction:column;
    gap:16px;
}
.innovation-list.collapsed{max-height:0;padding:0;overflow:hidden;}

/* 优化滚动条样式 */
.innovation-list::-webkit-scrollbar{
    width: 10px;
}
.innovation-list::-webkit-scrollbar-track{
    background: rgba(0, 112, 243, 0.1);
    border-radius: 10px;
}
.innovation-list::-webkit-scrollbar-thumb{
    background: rgba(0, 112, 243, 0.5);
    border-radius: 10px;
    border: 2px solid rgba(0, 112, 243, 0.1);
}
.innovation-list::-webkit-scrollbar-thumb:hover{
    background: rgba(0, 112, 243, 0.7);
}

.innovation-card{
    background:#fff;border-radius:24px;padding:16px 18px;
    transition:.2s;border:1px solid rgba(0,0,0,.03);
    box-shadow:0 5px 12px rgba(0,0,0,.02);
    cursor:pointer;position:relative;overflow:hidden;
    padding-bottom:48px;                /* 防止 badge 与文字重叠 */
}
.innovation-card:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 28px -12px rgba(0,112,243,.2);
    border-color:rgba(0,112,243,.3);
    background:#fefefe;
}
.innovation-card:active{transform:translateY(-1px);}
.innovation-card.active{
    border-color:#0070f3;
    background:#e6f0ff;
    box-shadow:0 8px 20px rgba(0,112,243,.2);
}
.innovation-icon{font-size:1.8rem;color:#0070f3;margin-bottom:10px;}
.innovation-card h3{font-size:1rem;font-weight:600;margin-bottom:8px;color:#0f2b3f;}
.innovation-card p{font-size:.75rem;color:#4f6f8f;line-height:1.4;}
.card-badge{
    position:absolute;bottom:12px;right:16px;
    font-size:.7rem;color:#0070f3;opacity:.6;
}

/* ---- 修改失效的图标 ---- */
[data-feature="market-pulse"] .innovation-icon i{
    /* 这里统一使用 Font Awesome 中真实存在的图标 */
    content:"\f200";      /* 对应 fa-chart-pie */
}

/* ---- 历史记录区 ---- */
.history-section{
    margin-top:auto;
    background:rgba(255,255,255,.6);
    border-radius:28px;padding:16px;
}
.history-header{
    display:flex;justify-content:space-between;align-items:center;
    cursor:pointer;font-weight:600;color:#2c4b6e;margin-bottom:12px;
}
.history-header i{transition:.2s;}
.history-list{
    max-height:0;overflow-y:auto;
    transition:max-height .3s ease-out;
}
.history-list.open{max-height:300px;}
.history-item{
    display:flex;justify-content:space-between;align-items:center;
    padding:10px 8px;border-radius:16px;margin-bottom:6px;
    background:rgba(255,255,255,.8);cursor:pointer;
    transition:background .1s;
}
.history-item:hover{background:#fff;}
.history-title{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
.history-actions{display:flex;gap:8px;}
.history-actions button{background:none;border:none;cursor:pointer;color:#7f9cbb;font-size:.8rem;transition:.1s;}
.history-actions button:hover{color:#0070f3;}
.delete-history-btn:hover{color:#e53e3e !important;}

/* ---- 右侧聊天（或页面主内容） ---- */
.chat-main,.page-main{
    flex:1;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(4px);
    border-radius:42px;
    box-shadow:0 25px 45px -12px rgba(0,0,0,.2);
    display:flex;flex-direction:column;overflow:hidden;
    border:1px solid rgba(255,255,255,.6);
}

/* ---- 通用头部（右侧） ---- */
.chat-header{
    padding:20px 28px;
    background:rgba(255,255,255,.8);
    border-bottom:1px solid #e2edf7;
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;
}
.header-info h2{
    font-size:1.5rem;font-weight:600;
    display:flex;align-items:center;gap:10px;
}
.header-info p{font-size:.8rem;color:#5b7a9a;margin-top:5px;}
.mode-badge{
    display:inline-block;margin-top:8px;padding:4px 8px;
    background:rgba(0,112,243,.1);color:#0070f3;
    font-size:.8rem;border-radius:12px;
}
.new-chat-btn{
    background:linear-gradient(100deg,#f0f5ff,white);
    border:1px solid #cbdde9;
    padding:10px 20px;border-radius:60px;
    font-weight:500;font-size:.85rem;color:#1e4663;
    cursor:pointer;transition:.2s;display:flex;align-items:center;gap:8px;
    box-shadow:0 1px 2px rgba(0,0,0,.02);
}
.new-chat-btn:hover{
    background:#fff;border-color:#0070f3;color:#0070f3;
    transform:scale(.98);
    box-shadow:0 4px 8px rgba(0,112,243,.1);
}

/* ---- 消息容器（聊天页面专用） ---- */
.messages-container{
    flex:1;overflow-y:auto;
    padding:24px 28px;
    display:flex;flex-direction:column;gap:20px;
    background:#fefefd;
    scroll-behavior:smooth;
}
.messages-container::-webkit-scrollbar{width:5px;}
.messages-container::-webkit-scrollbar-track{background:#eef2f8;border-radius:10px;}
.messages-container::-webkit-scrollbar-thumb{background:#b9d0e4;border-radius:10px;}

.message{
    display:flex;gap:12px;
    max-width:85%;animation:fadeSlideUp .25s ease-out;
}
.user-message{align-self:flex-end;flex-direction:row-reverse;}
.ai-message{align-self:flex-start;}
.avatar{
    width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:1.2rem;flex-shrink:0;
}
.user-message .avatar{background:#0070f3;color:#fff;}
.ai-message .avatar{background:#e9f0fe;color:#0070f3;border:1px solid #cde1f0;}
.bubble{
    background:#fff;padding:14px 20px;
    border-radius:24px;box-shadow:0 3px 12px rgba(0,0,0,.03);
    font-size:.95rem;line-height:1.5;color:#1f2f3e;
    word-break:break-word;white-space:pre-wrap;
    border:1px solid #eef2f8;
}
.user-message .bubble{
    background:#0070f3;color:#fff;
    border-bottom-right-radius:6px;border:none;
}
.ai-message .bubble{
    border-bottom-left-radius:6px;background:#fff;
    border:1px solid #e2edf4;
}

/* ---- 输入区 ---- */
.input-area{
    padding:18px 28px 26px;
    background:#fff;
    border-top:1px solid #eef2f8;
}
.input-wrapper{
    display:flex;gap:12px;
    background:#f8fafd;border-radius:60px;
    padding:6px 6px 6px 22px;
    border:1px solid #e0ebf3;transition:.2s;
}
.input-wrapper:focus-within{
    border-color:#0070f3;
    box-shadow:0 0 0 3px rgba(0,112,243,.1);
    background:#fff;
}
.input-wrapper input{
    flex:1;border:none;background:transparent;
    font-size:.95rem;padding:12px 0;outline:none;
}
.input-wrapper button{
    background:#0070f3;border:none;color:#fff;
    width:48px;height:48px;border-radius:50%;
    cursor:pointer;transition:.2s;font-size:1.2rem;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 8px rgba(0,112,243,.3);
}

/* 零工经济匹配优化器专用样式 */
.gig-economy-input{
    display:flex;gap:12px;
    background:#f8fafd;border-radius:60px;
    padding:6px 6px 6px 22px;
    border:1px solid #e0ebf3;transition:.2s;
    flex-wrap:wrap;
}
.gig-economy-input:focus-within{
    border-color:#0070f3;
    box-shadow:0 0 0 3px rgba(0,112,243,.1);
    background:#fff;
}
.gig-economy-input input{
    flex:1;border:none;background:transparent;
    font-size:.95rem;padding:12px 0;outline:none;
    min-width:200px;
}
.gig-economy-input button{
    background:#0070f3;border:none;color:#fff;
    width:48px;height:48px;border-radius:50%;
    cursor:pointer;transition:.2s;font-size:1.2rem;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 8px rgba(0,112,243,.3);
    flex-shrink:0;
}
.input-wrapper button:hover:not(:disabled),
.gig-economy-input button:hover:not(:disabled){
    background:#005cc2;transform:scale(.96);
}
.input-wrapper button:disabled,
.gig-economy-input button:disabled{
    background:#b9d0e4;cursor:not-allowed;box-shadow:none;
}
.voice-btn{
    background:linear-gradient(135deg,#10b981,#059669);
    border:none;color:#fff;
    width:48px;height:48px;border-radius:50%;
    cursor:pointer;transition:.2s;font-size:1.2rem;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 8px rgba(16,185,129,.3);
    flex-shrink:0;
}
.voice-btn:hover:not(:disabled){
    background:linear-gradient(135deg,#059669,#047857);
    transform:scale(.96);
}
.voice-btn.active{
    background:linear-gradient(135deg,#ef4444,#dc2626);
    animation:pulse 1.5s infinite;
    box-shadow:0 0 20px rgba(239,68,68,.5);
}
@keyframes pulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.1);}
}
.voice-status{
    font-size:.75rem;text-align:center;margin-top:8px;color:#6d8aac;
    display:flex;justify-content:center;align-items:center;gap:8px;
}
.voice-status i{
    font-size:.8rem;
}
.info-note{
    font-size:.7rem;text-align:center;margin-top:12px;color:#6d8aac;
}

/* ---- 动画 ---- */
@keyframes blink{
    0%,60%,100%{opacity:.3;transform:scale(.8);}
    30%{opacity:1;transform:scale(1);}
}
.typing-dots span{
    width:6px;height:6px;background:#6c8eae;
    border-radius:50%;animation:blink 1.4s infinite;
}
.typing-dots span:nth-child(2){animation-delay:.2s;}
.typing-dots span:nth-child(3){animation-delay:.4s;}
@keyframes fadeSlideUp{
    from{opacity:0;transform:translateY(12px);}
    to{opacity:1;transform:translateY(0);}
}

/* ---- 小屏幕适配 ---- */
@media (max-width:1000px){
    .app-container{flex-direction:column;padding:16px;}
    .innovation-sidebar{width:100%;margin-bottom:12px;}
    .message{max-width:95%;}
}
/* ──────── 两栏主容器 ──────── */
.main-content{
    display:flex;
    flex-direction:row;                     /* 默认水平排列 */
    width:100%;
    height:100%;
    overflow:hidden;
}
.chat-panel{
    flex:2;                                  /* 左半宽度 */
    display:flex;
    flex-direction:column;                   /* 先 header-输入-聊天 */
    min-width:0;                              /* 防止内容溢出 */
}
.chart-panel{
    flex:3;                                  /* 右侧更宽 (可自定义) */
    background:rgba(255,255,255,.96);
    padding:1rem;
    overflow-y:auto;
}

/* 兼容窄屏：两栏垂直堆叠 */
@media (max-width:960px){
    .main-content{ flex-direction:column; }
    .chat-panel{ flex:1; }
    .chart-panel{ flex:1; }
}