.sk-app{display:flex;flex-direction:column;height:100%;background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;}
.sk-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--border);gap:12px;flex-wrap:wrap;}
.sk-header-left{display:flex;align-items:center;gap:12px;}
.sk-header-right{display:flex;align-items:center;gap:8px;}
.sk-title{font-size:15px;font-weight:700;color:var(--text);}
.sk-main{display:grid;grid-template-columns:320px 1fr;gap:0;flex:1;overflow:hidden;min-height:0;}
.sk-sidebar{display:flex;flex-direction:column;border-right:1px solid var(--border);overflow-y:auto;background:var(--surface);}
.sk-section{padding:16px;border-bottom:1px solid var(--border);}
.sk-section:last-child{border-bottom:none;}
.sk-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var(--text-muted);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.sk-label{font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:5px;display:block;}
.sk-url-row{display:flex;gap:6px;align-items:center;}
.sk-url-input{flex:1;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-family:var(--font-mono);font-size:13px;outline:none;transition:border-color 0.15s;}
.sk-url-input:focus{border-color:var(--accent);}
.sk-url-input::placeholder{color:var(--text-muted);opacity:0.5;}
.sk-subprotocol-input{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 10px;font-family:var(--font-mono);font-size:12px;outline:none;margin-top:6px;transition:border-color 0.15s;}
.sk-subprotocol-input:focus{border-color:var(--accent);}
.sk-subprotocol-input::placeholder{color:var(--text-muted);opacity:0.5;}
.sk-connect-btn{padding:8px 16px;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.15s;font-family:var(--font-sans);white-space:nowrap;}
.sk-connect-btn.connect{background:var(--green);color:#fff;}
.sk-connect-btn.connect:hover{opacity:0.85;}
.sk-connect-btn.disconnect{background:var(--red);color:#fff;}
.sk-connect-btn.disconnect:hover{opacity:0.85;}
.sk-status-row{display:flex;align-items:center;gap:8px;margin-top:10px;}
.sk-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;transition:background 0.2s;}
.sk-status-dot.connected{background:var(--green);box-shadow:0 0 6px var(--green);}
.sk-status-dot.disconnected{background:var(--red);}
.sk-status-dot.connecting{background:var(--orange);animation:sk-pulse 1s ease-in-out infinite;}
@keyframes sk-pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
.sk-status-text{font-size:12px;color:var(--text-secondary);}
.sk-conn-info{display:flex;flex-direction:column;gap:4px;margin-top:8px;}
.sk-conn-info-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;}
.sk-conn-info-label{color:var(--text-muted);}
.sk-conn-info-value{color:var(--text-secondary);font-family:var(--font-mono);}
.sk-duration{font-family:var(--font-mono);color:var(--accent);font-size:12px;font-weight:600;}
.sk-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.sk-toggle-label{font-size:12px;color:var(--text-secondary);}
.sk-toggle{position:relative;width:36px;height:20px;cursor:pointer;}
.sk-toggle input{opacity:0;width:0;height:0;position:absolute;}
.sk-toggle-track{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--surface-3);border-radius:10px;transition:background 0.2s;}
.sk-toggle input:checked+.sk-toggle-track{background:var(--accent);}
.sk-toggle-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform 0.2s;}
.sk-toggle input:checked~.sk-toggle-thumb{transform:translateX(16px);}
.sk-reconnect-interval{width:60px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 6px;font-size:11px;font-family:var(--font-mono);text-align:center;outline:none;margin-left:8px;}
.sk-composer{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface);}
.sk-composer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.sk-format-tabs{display:flex;gap:2px;background:var(--surface-2);padding:2px;border-radius:6px;}
.sk-format-tab{padding:4px 10px;border:none;background:transparent;color:var(--text-muted);font-size:11px;font-weight:500;cursor:pointer;border-radius:4px;transition:all 0.15s;font-family:var(--font-sans);}
.sk-format-tab:hover{color:var(--text);}
.sk-format-tab.active{background:var(--accent);color:#080b14;font-weight:600;}
.sk-msg-textarea{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-family:var(--font-mono);font-size:12px;line-height:1.5;resize:vertical;outline:none;min-height:70px;max-height:200px;transition:border-color 0.15s;}
.sk-msg-textarea:focus{border-color:var(--accent);}
.sk-msg-textarea::placeholder{color:var(--text-muted);opacity:0.5;}
.sk-composer-actions{display:flex;gap:6px;margin-top:8px;align-items:center;}
.sk-send-btn{padding:7px 18px;border:none;border-radius:var(--radius-sm);background:var(--accent);color:#080b14;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.15s;font-family:var(--font-sans);}
.sk-send-btn:hover:not(:disabled){background:var(--accent-hover);}
.sk-send-btn:disabled{opacity:0.35;cursor:not-allowed;}
.sk-save-msg-btn{padding:7px 12px;border:none;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-secondary);font-size:11px;font-weight:600;cursor:pointer;transition:all 0.15s;font-family:var(--font-sans);}
.sk-save-msg-btn:hover{background:var(--surface-3);color:var(--text);}
.sk-saved-messages{max-height:150px;overflow-y:auto;margin-top:8px;}
.sk-saved-msg{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:var(--bg);border:1px solid var(--border-light);border-radius:var(--radius-sm);margin-bottom:4px;cursor:pointer;transition:background 0.12s;}
.sk-saved-msg:hover{background:var(--surface-2);}
.sk-saved-msg-text{font-size:11px;color:var(--text-secondary);font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;}
.sk-saved-msg-del{border:none;background:transparent;color:var(--text-muted);cursor:pointer;font-size:13px;padding:0 4px;line-height:1;opacity:0;transition:opacity 0.12s;}
.sk-saved-msg:hover .sk-saved-msg-del{opacity:1;}
.sk-saved-msg-del:hover{color:var(--red);}
.sk-chat-area{display:flex;flex-direction:column;overflow:hidden;min-height:0;}
.sk-chat-toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--surface-2);gap:8px;flex-wrap:wrap;}
.sk-chat-toolbar-left{display:flex;align-items:center;gap:6px;}
.sk-chat-toolbar-right{display:flex;align-items:center;gap:6px;}
.sk-filter-tabs{display:flex;gap:2px;background:var(--surface-3);padding:2px;border-radius:6px;}
.sk-filter-tab{padding:3px 10px;border:none;background:transparent;color:var(--text-muted);font-size:11px;font-weight:500;cursor:pointer;border-radius:4px;transition:all 0.15s;font-family:var(--font-sans);}
.sk-filter-tab:hover{color:var(--text);}
.sk-filter-tab.active{background:var(--accent);color:#080b14;font-weight:600;}
.sk-toolbar-btn{padding:4px 10px;border:none;border-radius:var(--radius-sm);background:var(--surface-3);color:var(--text-muted);font-size:11px;font-weight:500;cursor:pointer;transition:all 0.12s;font-family:var(--font-sans);}
.sk-toolbar-btn:hover{background:var(--border);color:var(--text);}
.sk-toolbar-btn.active{background:var(--accent-light);color:var(--accent);}
.sk-log{flex:1;overflow-y:auto;padding:12px 16px;background:var(--bg);display:flex;flex-direction:column;gap:6px;}
.sk-msg{padding:10px 14px;border-radius:var(--radius-sm);font-size:12px;font-family:var(--font-mono);line-height:1.5;position:relative;max-width:85%;word-break:break-word;animation:sk-msg-in 0.15s ease;}
@keyframes sk-msg-in{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.sk-msg.sent{background:var(--accent-light);border:1px solid rgba(0,212,255,0.15);color:var(--text);align-self:flex-end;border-bottom-right-radius:4px;}
.sk-msg.received{background:rgba(0,200,100,0.08);border:1px solid rgba(0,200,100,0.15);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px;}
.sk-msg.error{background:rgba(255,80,80,0.08);border:1px solid rgba(255,80,80,0.15);color:var(--red);align-self:center;max-width:100%;text-align:center;}
.sk-msg.system{background:var(--surface-2);border:1px solid var(--border-light);color:var(--text-muted);align-self:center;max-width:100%;text-align:center;font-family:var(--font-sans);font-style:italic;}
.sk-msg-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;gap:8px;}
.sk-msg-direction{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
.sk-msg.sent .sk-msg-direction{color:var(--accent);}
.sk-msg.received .sk-msg-direction{color:var(--green);}
.sk-msg-time{font-size:10px;color:var(--text-muted);font-family:var(--font-sans);}
.sk-msg-body{white-space:pre-wrap;}
.sk-msg-body.collapsed{max-height:80px;overflow:hidden;position:relative;}
.sk-msg-body.collapsed::after{content:'';position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(transparent,var(--surface-2));}
.sk-msg.sent .sk-msg-body.collapsed::after{background:linear-gradient(transparent,rgba(0,40,60,0.95));}
.sk-msg.received .sk-msg-body.collapsed::after{background:linear-gradient(transparent,rgba(0,40,30,0.95));}
.sk-msg-toggle{border:none;background:transparent;color:var(--accent);font-size:11px;cursor:pointer;padding:2px 0;font-family:var(--font-sans);text-decoration:underline;margin-top:4px;}
.sk-msg-toggle:hover{opacity:0.8;}
.sk-msg-actions{display:flex;gap:4px;margin-top:6px;opacity:0;transition:opacity 0.12s;}
.sk-msg:hover .sk-msg-actions{opacity:1;}
.sk-msg-action-btn{border:none;background:var(--surface-3);color:var(--text-muted);font-size:10px;padding:2px 8px;border-radius:3px;cursor:pointer;font-family:var(--font-sans);transition:all 0.12s;}
.sk-msg-action-btn:hover{color:var(--text);background:var(--border);}
.sk-empty-log{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:var(--text-muted);gap:8px;padding:40px;text-align:center;}
.sk-empty-log svg{opacity:0.3;margin-bottom:8px;}
.sk-empty-log p{font-size:14px;}
.sk-empty-log .sk-hint{font-size:12px;opacity:0.6;}
.sk-status-bar{padding:6px 16px;border-top:1px solid var(--border);background:var(--surface-2);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-muted);}
.sk-status-bar-left{display:flex;align-items:center;gap:12px;}
.sk-status-bar-right{display:flex;align-items:center;gap:12px;}
.sk-msg-count{font-family:var(--font-mono);}
@media (max-width:768px){
.sk-main{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
.sk-sidebar{border-right:none;border-bottom:1px solid var(--border);max-height:45vh;overflow-y:auto;}
.sk-msg{max-width:95%;}
.sk-url-row{flex-direction:column;}
.sk-url-input{width:100%;}
.sk-connect-btn{width:100%;}
.sk-header{padding:10px 14px;}
.sk-section{padding:12px;}
.sk-chat-toolbar{padding:6px 10px;}
.sk-log{padding:8px 10px;}
.sk-composer{padding:10px 12px;}
.sk-saved-msg-text{max-width:140px;}
}