*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
body{background:#f7f8fa;height:100vh;overflow:hidden}
.app-container{display:flex;height:100vh;animation:appSpring 0.7s cubic-bezier(.34,1.56,.64,1) forwards;opacity:0}
@keyframes appSpring{0%{opacity:0;transform:translateY(16px) scale(.98)}60%{opacity:1;transform:translateY(-4px) scale(1.005)}100%{opacity:1;transform:none}}
.sidebar{width:260px;min-width:260px;flex-shrink:0;background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;transition:.4s cubic-bezier(.34,1.56,.64,1);overflow:hidden}
.sidebar.collapsed{width:0;min-width:0;opacity:0}
.new-chat{margin:16px;padding:12px;background:#0066ff;color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 2px 8px rgba(0,102,255,.25);transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}
.new-chat::after{content:'';position:absolute;inset:0;border-radius:12px;opacity:0;background:radial-gradient(circle at center,rgba(255,255,255,.35),transparent 70%);transition:opacity .4s cubic-bezier(.34,1.56,.64,1)}
.new-chat:hover::after{opacity:1}
.new-chat:hover{background:#005ce6;transform:translateY(-3px) scale(1.03);box-shadow:0 6px 20px rgba(0,102,255,.35)}
.new-chat:active{transform:translateY(-1px) scale(.97)}
.new-chat:focus{outline:none;box-shadow:0 0 0 3px rgba(0,102,255,.3),0 2px 8px rgba(0,102,255,.25)}
.chat-list{flex:1;overflow-y:auto;padding:0 12px}
.chat-item{padding:10px 12px;border-radius:8px;cursor:pointer;font-size:14px;color:#333;display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;transition:all .25s cubic-bezier(.34,1.56,.64,1);animation:chatItemSpring 0.45s cubic-bezier(.34,1.56,.64,1) forwards;opacity:0;border-bottom:1px solid #eef0f2;position:relative;z-index:0}
.chat-item.chat-item-fast{animation:none;opacity:1}
.chat-item.has-dropdown{z-index:99}
@keyframes chatItemSpring{0%{opacity:0;transform:translateX(-16px) scale(.97)}55%{opacity:1;transform:translateX(3px) scale(1.01)}100%{opacity:1;transform:none}}
.chat-item.active{background:#eef4ff;color:#0066ff;font-weight:500}
.chat-item:hover{background:#f4f5f7}
.chat-item-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-menu-btn{width:20px;height:20px;border:none;background:0 0;opacity:0;cursor:pointer}
.chat-item:hover .chat-menu-btn{opacity:1}
.chat-dropdown{position:absolute;background:#fff;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);width:130px;z-index:9999;opacity:0;transform:translateY(-8px) scale(.95);pointer-events:none;transition:.3s cubic-bezier(.34,1.56,.64,1);overflow:hidden;top:auto;bottom:-40px;right:-10px}
.chat-dropdown.show{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
.dropdown-item{padding:10px 14px;font-size:14px;cursor:pointer}
.dropdown-item:hover{background:#f5f7fa}
.dropdown-item.delete{color:#f53f3f}
.chat-container{flex:1;display:flex;flex-direction:column;background:#f7f8fa;min-width:0;position:relative}

.header{
    height:50px;
    background:#fff;
    border-bottom:1px solid #e5e7eb;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 20px;
    font-size:16px;
    font-weight:500;
    color:#1d2129;
    position:relative;
}
.toggle-btn{
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    border-radius:12px;
    background:transparent;
    border:none;
    font-size:27px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    z-index:1;
    box-shadow:none;
    outline:none;
    color:#666;
}
.toggle-btn:hover{background:transparent;box-shadow:none;color:#333}
.toggle-btn:active{background:transparent;box-shadow:none}
.toggle-btn:focus{outline:none;box-shadow:none}

.messages {
  flex: 1;
    padding:10px 30px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:15px;
}

@media (min-width: 768px) {
  .messages {
    padding: 15px 200px;
  }
}

.message-item{
    display:flex;
    width: 100%;
    position: relative;
    padding-bottom: 36px;
}
.message-item.user{animation:msgSlideRight 0.5s cubic-bezier(.34,1.56,.64,1) forwards;opacity:0}
.message-item.bot{animation:msgSlideLeft 0.5s cubic-bezier(.34,1.56,.64,1) forwards;opacity:0}
@keyframes msgSlideRight{0%{opacity:0;transform:translateX(40px) scale(.96)}60%{opacity:1;transform:translateX(-6px) scale(1.01)}100%{opacity:1;transform:none}}
@keyframes msgSlideLeft{0%{opacity:0;transform:translateX(-30px) scale(.97)}65%{opacity:1;transform:translateX(4px) scale(1.005)}100%{opacity:1;transform:none}}

.message-item.user{
    justify-content: flex-end;
}
.message-item.user .message{
    max-width: 90%;
    width: fit-content;
    background: #e5e7eb;
    color: #1d2129;
    padding: 12px 16px;
    border-radius: 16px;
    border: none;
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.6;
    font-size: 15px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.message-item.bot{
    justify-content: flex-start;
}
.message-item.bot .message{
    width: 100%;
    background: transparent;
    color: #1d2129;
    padding: 0;
    border-radius: 0;
    border: none;
    word-break: break-word;
    line-height: 1.6;
    font-size: 15px;
}

.thinking-indicator{
    display:inline-flex;
    align-items:center;
    gap:2px;
    padding:10px 18px;
    background:#f7f8fa;
    border-radius:16px;
    box-shadow:0 1px 6px rgba(0,102,255,.08);
}

.message-actions {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    gap: 6px;
    opacity: 0;
    transform: translateY(4px);
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
    z-index: 2;
}
.message-item:hover .message-actions{
    opacity: 1;
    transform: translateY(0);
}

.action-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all .25s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    color: #666;
}
.action-btn:hover{
    background: rgba(0,0,0,0.05);
    color: #333;
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
    transform: translateY(-2px) scale(1.12);
}
.action-btn:active{transform:translateY(0) scale(.92);transition-duration:.1s}
.action-btn:focus{
    outline:none;
    box-shadow:0 0 0 2px rgba(0,102,255,.3),0 1px 3px rgba(0,0,0,.06);
}

.code-block-wrapper {
    background: #282c34;
    border-radius: 12px;
    margin: 12px 0;
    overflow: hidden;
    box-shadow:0 2px 12px rgba(0,0,0,.18),0 1px 4px rgba(0,0,0,.1);
}

.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #21252b;
    border-bottom: 1px solid #3e4451;
    position: sticky;
    top: 0;
    z-index: 10;
}

.code-lang {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #abb2bf;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

.code-lang:hover {
    color: #fff;
}

.lang-text {
    text-transform: lowercase;
}

.collapse-icon {
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
    opacity: 0.7;
}

.code-block-wrapper.collapsed .collapse-icon {
    transform: rotate(-100deg) scale(1.1);
}

.code-tools {
    display: flex;
    gap: 4px;
}

.code-tool-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: #abb2bf;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s cubic-bezier(.34,1.56,.64,1);
}

.code-tool-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    transform: scale(1.15) rotate(5deg);
}

.code-block-content {
    overflow-x: auto;
    max-height: 600px;
    overflow-y: auto;
}

.code-block-wrapper.collapsed .code-block-content {
    max-height: 0;
    overflow: hidden;
}

.code-block-content pre {
    margin: 0;
    padding: 16px;
    background: transparent !important;
}

.code-block-content code {
    background: transparent !important;
    color: #abb2bf !important;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
}

/* 全屏模式 */
.code-block-wrapper:fullscreen {
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

.code-block-wrapper:fullscreen .code-block-content {
    flex: 1;
    max-height: none;
}

.code-block-wrapper:fullscreen .fullscreen-btn {
    color: #61afef;
}

.message h1{font-size:18px;font-weight:600;margin:16px 0 8px;line-height:1.4}
.message h2{font-size:17px;font-weight:600;margin:14px 0 7px;line-height:1.4}
.message h3{font-size:16px;font-weight:600;margin:12px 0 6px;line-height:1.4}
.message h4{font-size:15px;font-weight:600;margin:10px 0 5px;line-height:1.4}
.message p{margin:6px 0}
.message ul,.message ol{padding-left:20px;margin:8px 0}
.message li{margin:3px 0;line-height:1.6}
.message strong{font-weight:600}
.message code{background:#f1f3f4;padding:2px 5px;border-radius:4px;font-size:13px;font-family:Consolas,Monaco,monospace;color:#c7254e}
.message pre{
    background:#282c34;color:#abb2bf;padding:14px;border-radius:12px;
    overflow-x:auto;margin:12px 0;border:none;
    font-size:13px;
    line-height:1.6;font-family:Consolas,Monaco,monospace;
    position: relative;
    box-shadow:0 2px 12px rgba(0,0,0,.15),0 1px 4px rgba(0,0,0,.08);
}
.message pre code{background:transparent;padding:0;border:none;color:#abb2bf;font-size:inherit}

.message table{
    border-collapse:collapse;
    max-width:95%;
    width:fit-content;
    margin:12px auto;
    border-radius:0;
    overflow:hidden;
    border:1px solid #c4c9d2;
}
.message th{
    background:#e8eaed;
    font-weight:600;
    padding:5px 9px;
    text-align:left;
    border:1px solid #c4c9d2;
    font-size:14px;
}
.message td{
    border:1px solid #c4c9d2;
    padding:5px 9px;
    font-size:14px;
    background:transparent;
}
.message tr:hover td{background:transparent}
.message a{color:#0066ff;text-decoration:underline;cursor:pointer;word-break:break-word}
.message blockquote{border-left:3px solid #0066ff;padding-left:10px;margin:6px 0;color:#666}

.loading-tip{display:none !important;}
.loading-tip.show{
    display:inline-flex !important;
    align-items:center;
    gap:8px;
    padding:10px 20px;
    background:#fff;
    border-radius:24px;
    box-shadow:0 2px 12px rgba(0,0,0,.08);
    font-size:14px;
    color:#666;
    animation:breatheSpring 2.5s cubic-bezier(.34,1.56,.64,1) infinite;
}
@keyframes breatheSpring{
    0%,100%{box-shadow:0 2px 12px rgba(0,102,255,.06);transform:scale(1)}
    35%{box-shadow:0 6px 24px rgba(0,102,255,.2),0 2px 8px rgba(0,0,0,.06);transform:scale(1.02)}
    70%{box-shadow:0 3px 16px rgba(0,102,255,.12);transform:scale(1)}
}
.loading-tip .dot{
    width:7px;height:7px;border-radius:50%;background:#0066ff;display:inline-block;animation:pulseDot 1.4s ease-in-out infinite
}
.loading-tip .dot:nth-child(1){animation-delay:0s}
.loading-tip .dot:nth-child(2){animation-delay:.25s}
.loading-tip .dot:nth-child(3){animation-delay:.5s}
@keyframes pulseDot{
    0%,80%,100%{transform:scale(.5);opacity:.3}
    40%{transform:scale(1.1);opacity:1}
}
.input-area{background:#fff;border-top:1px solid #e5e7eb;padding:16px 20px;display:flex;gap:12px;align-items:flex-end;box-shadow:0 -2px 12px rgba(0,0,0,.04)}
#input{flex:1;padding:12px 16px;border:1px solid #e5e7eb;border-radius:24px;outline:0;resize:none;min-height:44px;max-height:120px;font-size:15px;line-height:1.5;background:#f7f8fa;transition:all .35s cubic-bezier(.34,1.56,.64,1)}
#input:focus{border-color:#0066ff;background:#fff;box-shadow:0 0 0 4px rgba(0,102,255,.18),0 4px 16px rgba(0,102,255,.1);transform:scale(1.005)}
.send-btn{width:44px;height:44px;border-radius:50%;background:#0066ff;color:#fff;border:none;font-size:16px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,102,255,.25);transition:all .3s cubic-bezier(.34,1.56,.64,1)}
.send-btn:hover{background:#005ce6;transform:translateY(-3px) scale(1.08);box-shadow:0 6px 18px rgba(0,102,255,.4)}
.send-btn:active{transform:translateY(0) scale(.9);box-shadow:0 1px 4px rgba(0,102,255,.25);transition-duration:.12s}
.send-btn:focus{outline:none;box-shadow:0 0 0 3px rgba(0,102,255,.35),0 4px 14px rgba(0,102,255,.35)}
.scroll-to-bottom{
    position: absolute;
    bottom: 105px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    box-shadow:0 2px 12px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
    z-index: 10;
}
.scroll-to-bottom.show{
    opacity: 1;
    pointer-events: all;
    animation:scrollSpringBounce 2.4s cubic-bezier(.34,1.56,.64,1) infinite
}
@keyframes scrollSpringBounce{
    0%,100%{transform:translateX(-50%) translateY(0)}
    30%{transform:translateX(-50%) translateY(-5px)}
    60%{transform:translateX(-50%) translateY(-1px)}
}
.scroll-to-bottom:hover{background:#f7f8fa}
.scroll-to-bottom::after{content:"↓";font-size:18px;color:#0066ff;font-weight:bold}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#9ca3af}

.user-edit-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 90%;
    width: fit-content;
}
.user-edit-input {
    flex: 1;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid #0066ff;
    background: #ffffff;
    font-size: 15px;
    line-height: 1.6;
    min-height: 48px;
    outline: none;
    resize: none;
    font-family: inherit;
    box-shadow:0 2px 8px rgba(0,102,255,.12);
}

.upload-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f7f8fa;
    color: #666;
    border: 1px solid #e5e7eb;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
    box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.upload-btn:hover {
    background: #e5e7eb;
    color: #333;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
    transform: translateY(-3px) scale(1.08);
}
.upload-btn:focus{
    outline:none;
    box-shadow:0 0 0 3px rgba(0,102,255,.25),0 1px 3px rgba(0,0,0,.06);
}
#fileInput {
    display: none;
}

.search-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f7f8fa;
    color: #666;
    border: 1px solid #e5e7eb;
    font-size: 17px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
    box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.search-btn:hover {
    background: #e5e7eb;
    color: #333;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
    transform: translateY(-3px) scale(1.08);
}
.search-btn:focus{
    outline:none;
    box-shadow:0 0 0 3px rgba(0,102,255,.25),0 1px 3px rgba(0,0,0,.06);
}
.search-btn.active {
    background: #0066ff;
    color: #fff;
    border-color: #0066ff;
    box-shadow: 0 2px 8px rgba(0,102,255,.25);
}

/* 消息删除淡出动画 - 弹簧收缩 */
.message-item.removing{
    animation:springRemove .4s cubic-bezier(.55,0,.98,.5) forwards
}
@keyframes springRemove{
    0%{opacity:1;transform:none}
    30%{opacity:.7;transform:translateX(8px) scale(.99)}
    100%{opacity:0;transform:translateX(40px) scale(.9);height:0;padding:0;margin:0;overflow:hidden}
}

/* 复制成功反馈 - 弹性脉冲 */
.action-btn.copied{animation:copyPop .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes copyPop{
    0%{transform:scale(1)}
    25%{transform:scale(1.25) rotate(-5deg);color:#0066ff;border-color:#0066ff}
    50%{transform:scale(.95) rotate(3deg)}
    75%{transform:scale(1.05)}
    100%{transform:scale(1) rotate(0)}
}

/* Word统计显示 */
.word-stats {
    position: absolute;
    bottom: 8px;
    left: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(4px);
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
    z-index: 2;
    font-size: 13px;
    color: #999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.message-item:hover .word-stats{
    opacity: 1;
    transform: translateY(0);
}
.word-stats-label {
    font-weight: 500;
}
.word-stats-value {
    color: #0066ff;
    font-weight: 600;
}