/* === 基础 === */
.jet-wrap { max-width:900px; margin:20px auto; font-size:14px; }
.jet-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; flex-wrap:wrap; gap:8px; }
.jet-header h3 { margin:0; font-size:18px; line-height:1.3; }
.jet-header-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.jet-btn { display:inline-block; padding:8px 18px; background:#3498db; color:#fff; border:none; border-radius:4px; cursor:pointer; text-decoration:none; font-size:14px; line-height:1.4; }
.jet-btn:hover { background:#2980b9; color:#fff; }
.jet-btn:disabled { background:#bdc3c7; cursor:not-allowed; }
.jet-btn-secondary { background:#95a5a6; }
.jet-btn-secondary:hover { background:#7f8c8d; }
.jet-btn-danger { background:#e74c3c; }
.jet-btn-danger:hover { background:#c0392b; }
.jet-notice { padding:12px 16px; background:#fff3cd; border:1px solid #ffc107; border-radius:4px; color:#856404; }
.jet-empty { color:#999; padding:20px 0; }
.jet-msg { margin-top:10px; color:#27ae60; }
.jet-msg.jet-error { color:#e74c3c; }

/* === 状态标签 === */
.jet-status { display:inline-block; padding:3px 10px; border-radius:10px; font-size:12px; color:#fff; white-space:nowrap; font-weight:500; letter-spacing:.3px; }

/* === 身份标签 === */
.jet-badge-admin { display:inline-block; background:#e74c3c; color:#fff; font-size:11px; padding:1px 6px; border-radius:3px; margin-left:6px; }
.jet-badge-user { display:inline-block; background:#3498db; color:#fff; font-size:11px; padding:1px 6px; border-radius:3px; margin-left:6px; }

/* === 状态筛选按钮 === */
.jet-status-filter { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; align-items:center; padding:10px 12px; border:1px solid #eceff3; border-radius:8px; background:#fff; }
.jet-filter-btn { display:inline-block; padding:6px 14px; border:1px solid #ddd; border-radius:20px; font-size:13px; color:#555; text-decoration:none; background:#fff; transition:all .15s; white-space:nowrap; }
.jet-filter-btn:hover { background:#f5f5f5; color:#333; border-color:#bbb; }
.jet-filter-btn.active { background:#3498db; color:#fff; border-color:#3498db; }

/* === 列表搜索栏 === */
.jet-list-search { margin-bottom:16px; padding:12px; background:#f8fafc; border:1px solid #e5e9ef; border-radius:8px; }
.jet-list-search-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.jet-list-search-input { flex:1; min-width:240px; padding:8px 10px; border:1px solid #ccd3db; border-radius:6px; font-size:14px; box-sizing:border-box; }
.jet-list-search .jet-btn { padding:8px 14px; }

/* === 工单号码 === */
.jet-ticket-no { font:inherit; font-family:inherit; font-size:inherit; font-weight:inherit; line-height:inherit; letter-spacing:normal; color:inherit; white-space:nowrap; font-variant-numeric:normal; }
.jet-table .jet-ticket-no,
.jet-card-top .jet-ticket-no,
.jet-sidebar-row .jet-ticket-no,
.jet-thank-meta .jet-ticket-no { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; }

/* === 桌面端工单列表表格 === */
.jet-table { width:100%; border-collapse:collapse; }
.jet-table th, .jet-table td { padding:10px 12px; border-bottom:1px solid #eee; text-align:left; }
.jet-table th { background:#f5f5f5; font-weight:600; font-size:13px; color:#666; }
.jet-table a { color:#3498db; text-decoration:none; }
.jet-table a:hover { text-decoration:underline; }
.jet-table tbody tr:nth-child(odd) { background:#fff; }
.jet-table tbody tr:nth-child(even) { background:#f6f7f9; }
.jet-table tbody tr:hover { background:#edf3fa; }

/* === 移动端卡片列表 === */
.jet-card-list { display:flex; flex-direction:column; gap:10px; }
.jet-card { display:block; background:#fff; border:1px solid #e0e0e0; border-radius:10px; padding:16px 18px; text-decoration:none; color:#333; transition:box-shadow .15s, border-color .15s; }
.jet-card:hover { box-shadow:0 2px 12px rgba(0,0,0,.08); border-color:#ccc; }
.jet-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:8px; }
.jet-card-no { font-size:12px; color:#888; font-weight:600; white-space:nowrap; flex-shrink:0; }
.jet-card-subject { font-size:15px; font-weight:600; line-height:1.4; margin-bottom:10px; color:#222; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.jet-card-bottom { display:flex; gap:10px; font-size:12px; color:#888; flex-wrap:wrap; align-items:center; padding-top:8px; border-top:1px solid #f0f0f0; }
.jet-card-bottom span { display:inline-flex; align-items:center; gap:3px; }

/* === 分页 === */
.jet-pagination { margin-top:20px; padding:12px 14px; border:1px solid #e5e9ef; border-radius:8px; background:#fff; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.jet-pagination-summary { font-size:13px; color:#5f6b7a; white-space:nowrap; }
.jet-pagination-summary-compact { display:none; }
.jet-pagination-controls { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.jet-pagination .jet-page-current,
.jet-pagination .jet-page-link,
.jet-pagination .jet-page-nav { display:inline-flex; align-items:center; justify-content:center; min-width:36px; padding:7px 12px; border:1px solid #d5dbe3; border-radius:6px; text-decoration:none; color:#334155; background:#fff; font-size:13px; line-height:1.2; box-sizing:border-box; }
.jet-pagination .jet-page-current { background:#2271b1; color:#fff; border-color:#2271b1; font-weight:600; }
.jet-pagination .jet-page-link:hover,
.jet-pagination .jet-page-nav:hover { background:#f4f7fb; border-color:#bcc7d4; }
.jet-pagination .jet-page-nav { min-width:52px; }
.jet-pagination .jet-page-nav.is-disabled { color:#9aa4b2; border-color:#e2e7ee; background:#f7f9fc; cursor:not-allowed; pointer-events:none; }
.jet-page-ellipsis { color:#9aa4b2; font-size:14px; padding:0 2px; }

/* === 表单 === */
.jet-form label { display:block; margin-bottom:4px; font-weight:600; }
.jet-form .required { color:red; }
.jet-field { margin-bottom:15px; }
.jet-field input[type=text], .jet-field textarea, .jet-field select { width:100%; padding:8px 10px; border:1px solid #ccc; border-radius:4px; font-size:14px; box-sizing:border-box; }
.jet-field select { background:#fff; }
.jet-field input[type=file] { font-size:13px; }
.jet-confirm-field label { display:inline-flex; align-items:center; gap:6px; font-weight:normal; cursor:pointer; }
.jet-confirm-field input[type=checkbox] { width:16px; height:16px; margin:0; }

/* === 提交感谢文本 === */
.jet-thank-box { margin:12px 0 16px; padding:14px 16px; border:1px solid #d8ebff; border-radius:8px; background:#f4f9ff; color:#1f2d3d; line-height:1.7; }
.jet-thank-title { font-size:16px; font-weight:600; margin-bottom:8px; }
.jet-thank-text { margin-bottom:8px; }
.jet-thank-meta { margin:4px 0; word-break:break-all; }
.jet-thank-meta a { color:#2271b1; text-decoration:none; }
.jet-thank-meta a:hover { text-decoration:underline; }
.jet-thank-warn { margin-top:8px; padding-top:8px; border-top:1px dashed #b8cce2; color:#8a5a00; }
.jet-user-history-link { font-weight:600; text-decoration:none; }
.jet-user-history-link:hover { text-decoration:underline; }
.jet-reply-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.jet-modal-mask { position:fixed; top:0; left:0; width:100%; height:100%; display:none; background:rgba(0,0,0,.5); z-index:99999; align-items:center; justify-content:center; padding:16px; box-sizing:border-box; }
.jet-modal-box { background:#fff; width:100%; max-width:520px; max-height:calc(100vh - 32px); display:flex; flex-direction:column; border-radius:8px; padding:22px; position:relative; margin:auto; box-shadow:0 10px 30px rgba(0,0,0,.15); }
.jet-confirm-modal-box { max-width:600px; width:min(600px, 100%); }
.jet-confirm-modal-title { margin:0 0 12px; font-size:18px; line-height:1.4; }
.jet-confirm-modal-content { flex:1 1 auto; overflow-y:auto; line-height:1.8; margin-bottom:16px; padding-right:4px; }
.jet-modal-close { position:absolute; top:10px; right:12px; border:none; background:none; font-size:22px; line-height:1; cursor:pointer; color:#666; }
.jet-modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }
.jet-confirm-modal-actions { justify-content:center; padding-top:12px; border-top:1px solid #eee; margin-top:0; flex-shrink:0; }
#jet-confirm-modal .jet-modal-box { overflow-y:auto; }
#jet-confirm-modal .jet-modal-close { display:none !important; }
#jet-confirm-modal .jet-modal-actions { justify-content:center; padding-top:12px; border-top:1px solid #eee; }
.jet-header-actions #jet-open-title-modal-top { order:2; }
.jet-header-actions #jet-open-status-modal-top { order:3; }
.jet-header-actions a[href="#jet-reply-form"] { order:4; }
.jet-header-actions #jet-close-ticket-btn { order:5; }

/* === 附件 === */
.jet-attachments { margin-top:8px; padding-top:8px; border-top:1px dashed #ddd; font-size:13px; }
.jet-attachment-link { display:inline-block; margin-right:12px; color:#3498db; text-decoration:none; }
.jet-attachment-link:hover { text-decoration:underline; }

/* === 回复表单 === */
.jet-reply-form { margin-top:20px; padding:16px; background:#fff; border:1px solid #e0e0e0; border-radius:8px; }
.jet-reply-form h4 { margin:0 0 12px; font-size:15px; }
.jet-reply-form textarea { width:100%; padding:10px 12px; border:1px solid #ccc; border-radius:6px; font-size:14px; box-sizing:border-box; margin-bottom:10px; resize:vertical; }

/* ============================================
   详情页：双栏布局（优化）
   ============================================ */
.jet-detail-wrap { max-width:1100px; }
.jet-detail-layout { display:flex; gap:24px; align-items:flex-start; }
.jet-detail-main { flex:1; min-width:0; }
.jet-detail-sidebar { width:270px; flex-shrink:0; position:sticky; top:32px; }

/* 侧栏卡片 */
.jet-sidebar-card { background:#fff; border:1px solid #e0e0e0; border-radius:8px; padding:16px; margin-bottom:14px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.jet-sidebar-card h4 { margin:0 0 10px; font-size:14px; color:#333; border-bottom:1px solid #eee; padding-bottom:8px; font-weight:600; }
.jet-sidebar-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; font-size:13px; }
.jet-sidebar-label { color:#888; flex-shrink:0; margin-right:8px; }

/* ============================================
   聊天式对话布局（优化：用户左、客服右）
   ============================================ */
.jet-chat { display:flex; flex-direction:column; gap:14px; margin-bottom:20px; padding:18px; background:#f7f8fa; border-radius:10px; min-height:80px; border:1px solid #e8e8e8; }

.jet-chat-row { display:flex; max-width:78%; }
.jet-chat-left { align-self:flex-start; }
.jet-chat-right { align-self:flex-end; }

.jet-chat-bubble { padding:12px 16px; border-radius:14px; line-height:1.7; word-break:break-word; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.jet-bubble-user { background:#fff; border:1px solid #e0e0e0; border-bottom-left-radius:4px; }
.jet-bubble-admin { background:#d4edda; border:1px solid #b8d9c0; border-bottom-right-radius:4px; }

.jet-chat-meta { font-size:12px; color:#888; margin-bottom:6px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.jet-chat-meta strong { color:#333; font-size:13px; }
.jet-chat-time { color:#aaa; font-size:11px; margin-left:auto; }
.jet-chat-body { font-size:14px; color:#333; }
.jet-chat-body p { margin:0 0 6px; }
.jet-chat-body p:last-child { margin-bottom:0; }

/* ============================================
   响应式：桌面/移动切换
   ============================================ */
.jet-mobile-only { display:none; }
.jet-desktop-only { display:table; }

@media (max-width: 768px) {
    .jet-mobile-only { display:flex; }
    .jet-desktop-only { display:none; }

    /* 详情页双栏 → 单栏 */
    .jet-detail-layout { flex-direction:column; }
    .jet-detail-sidebar { width:100%; order:-1; position:static; display:flex; gap:10px; flex-wrap:wrap; }
    .jet-sidebar-card { flex:1; min-width:200px; margin-bottom:8px; }

    /* 聊天气泡宽度放大 */
    .jet-chat-row { max-width:92%; }
    .jet-chat { padding:12px; gap:10px; }
    .jet-chat-bubble { padding:10px 12px; border-radius:12px; }

    /* 分页按钮更大，适合手机点击 */
    .jet-pagination { gap:8px; padding:8px 10px; align-items:center; justify-content:space-between; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .jet-pagination-summary { width:auto; min-width:0; flex:0 1 auto; font-size:12px; }
    .jet-pagination-summary-full { display:none; }
    .jet-pagination-summary-compact { display:inline; }
    .jet-pagination-controls { width:auto; flex:0 0 auto; gap:4px; flex-wrap:nowrap; }
    .jet-pagination .jet-page-current,
    .jet-pagination .jet-page-link,
    .jet-pagination .jet-page-nav { padding:7px 10px; font-size:12px; min-width:34px; border-radius:6px; flex:0 0 auto; }
    .jet-pagination .jet-page-nav { min-width:50px; }
    .jet-pagination .jet-page-current,
    .jet-pagination .jet-page-link,
    .jet-pagination .jet-page-nav-first,
    .jet-pagination .jet-page-nav-last,
    .jet-pagination .jet-page-ellipsis { display:none; }

    /* 状态筛选按钮 */
    .jet-status-filter { gap:6px; }
    .jet-filter-btn { padding:6px 12px; font-size:12px; }
    .jet-list-search { padding:10px; }
    .jet-list-search-input { min-width:100%; }

    /* header 堆叠 */
    .jet-header { flex-direction:column; align-items:flex-start; gap:10px; }
    .jet-header h3 { font-size:16px; word-break:break-word; }
    .jet-header-actions { width:100%; }

    .jet-modal-mask { padding:8px; }
    .jet-modal-box { max-height:calc(100vh - 16px); padding:16px; }
    .jet-confirm-modal-box { max-width:100%; max-height:calc(100vh - 16px); }
    .jet-confirm-modal-box .jet-confirm-modal-content { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; max-height:calc(100vh - 160px); }
    .jet-confirm-modal-box .jet-confirm-modal-title { flex-shrink:0; }
    .jet-confirm-modal-box .jet-confirm-modal-actions { flex-shrink:0; }
    .jet-modal-actions { flex-wrap:wrap; flex-shrink:0; }
    .jet-confirm-modal-actions .jet-btn { flex:1 1 120px; text-align:center; }

    .jet-wrap { margin:10px; }
    .jet-detail-wrap { max-width:100%; }

    /* 卡片优化 */
    .jet-card { padding:14px 14px; border-radius:8px; }
    .jet-card-subject { font-size:14px; margin-bottom:8px; }
    .jet-card-bottom { gap:8px; font-size:11px; }

    /* 回复表单 */
    .jet-reply-form { padding:12px; }
}