/* ============================================
   考公备考打卡 · 自习室样式 v1.0
   修复头部按钮排版错位
   v1.0.2：新增暂离（away）状态样式
   ============================================ */

#studyroom-container{padding:4px 0;}

/* ===== 房间列表页 ===== */
.room-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:8px;}
.room-list-header h2{font-size:17px;font-weight:800;}
.room-list-actions{display:flex;gap:8px;}
.room-btn-primary,.room-btn-secondary{padding:8px 14px;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;}
.room-btn-primary{background:#2E7D32;color:#fff;}
.room-btn-secondary{background:#e8f5e9;color:#2E7D32;}

.room-card{display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;padding:14px;margin-bottom:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);cursor:pointer;}
.room-card-icon{font-size:28px;}
.room-card-info{flex:1;min-width:0;}
.room-card-name{font-size:14px;font-weight:700;}
.room-card-desc{font-size:11px;color:#888;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.room-card-meta{display:flex;gap:8px;font-size:11px;color:#777;flex-wrap:wrap;align-items:center;}
.owner-badge{background:#fff3e0;color:#E65100;padding:1px 6px;border-radius:6px;font-weight:600;}
.room-card-arrow{font-size:22px;color:#ccc;}

.empty-state{text-align:center;padding:40px 20px;color:#999;}
.empty-state .empty-icon{font-size:48px;margin-bottom:12px;}
.empty-sub{font-size:12px;margin-top:4px;}

/* ===== 房间视图头部（修复排版）===== */
.room-view-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:nowrap;}
.btn-back{background:none;border:none;font-size:14px;color:#2E7D32;cursor:pointer;white-space:nowrap;padding:4px 6px;}
.room-view-center{flex:1;min-width:0;text-align:center;}
.room-view-name{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.room-code-badge{font-size:11px;color:#888;background:#f0f0f0;padding:2px 8px;border-radius:8px;margin-top:2px;display:inline-block;}
.room-view-actions{display:flex;gap:4px;flex-wrap:nowrap;}
.room-btn-sm{padding:5px 8px;border:none;border-radius:8px;font-size:11px;cursor:pointer;white-space:nowrap;background:#e8f5e9;color:#2E7D32;font-weight:600;}
.room-btn-sm.room-btn-add{background:#fff3e0;color:#E65100;}
.room-btn-sm.room-btn-danger{background:#ffebee;color:#C62828;border:1px solid #ffcdd2;}
.member-transfer{margin-left:auto;background:#e8f5e9;color:#2E7D32;border:1px solid #c8e6c9;border-radius:6px;padding:3px 10px;font-size:12px;cursor:pointer;}
.member-transfer:hover{background:#c8e6c9;}

/* ===== 房间工具栏 ===== */
.room-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;font-size:12px;padding:8px 10px;
  background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.toolbar-online{color:#2E7D32;font-weight:600;}
.toolbar-seat{color:#555;}
.room-btn-focus{margin-left:auto;padding:6px 12px;background:#2E7D32;color:#fff;border:none;border-radius:8px;font-size:12px;cursor:pointer;font-weight:600;}
.room-btn-leave-seat{padding:6px 10px;background:#fff;color:#C62828;border:1px solid #ffcdd2;border-radius:8px;font-size:12px;cursor:pointer;}
.room-btn-exit{padding:6px 10px;background:#f5f5f5;color:#555;border:none;border-radius:8px;font-size:12px;cursor:pointer;}

/* ===== 座位网格 ===== */
.room-grid{padding-bottom:8px;}
.room-teacher-desk{text-align:center;background:#fff8e1;border:1px dashed #ffd54f;border-radius:10px;padding:8px;margin-bottom:12px;
  font-size:13px;color:#E65100;font-weight:600;}
.room-seats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px;}

.seat{background:#fff;border-radius:12px;padding:10px 6px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.05);
  display:flex;flex-direction:column;align-items:center;gap:4px;min-height:80px;justify-content:center;}
.seat-avatar{font-size:24px;}
.seat-name{font-size:11px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.seat-label{font-size:9px;color:#aaa;}
.seat-empty{border:2px dashed #ddd;background:#fafafa;cursor:pointer;color:#bbb;}
.seat-empty:active{background:#e8f5e9;}
.seat-occupied{border:1px solid #e0e0e0;}
.seat-mine{border:2px solid #2E7D32;background:#e8f5e9;cursor:pointer;}
.seat-focusing{border-color:#FF8F00!important;background:#fff3e0!important;}
.seat-focus-badge{font-size:9px;color:#E65100;font-weight:700;}
/* v1.0.2：暂离状态（半透明+虚线，提示他人"很快回来"） */
.seat-away{opacity:.6;border-style:dashed!important;}
.seat-away-badge{font-size:9px;color:#888;font-weight:700;}

/* ===== 面板（成员/排行）===== */
.members-panel,.ranking-panel{position:fixed;top:0;right:0;bottom:0;width:88%;max-width:360px;background:#fff;
  box-shadow:-4px 0 16px rgba(0,0,0,.12);z-index:250;overflow-y:auto;padding:16px;transition:transform .3s;}
.members-panel.hidden,.ranking-panel.hidden{display:none;}
.panel-header{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:700;margin-bottom:12px;}
.panel-header button{background:none;border:none;font-size:18px;cursor:pointer;}

.member-item,.rank-item{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid #f5f5f5;font-size:13px;}
.member-item.member-me,.rank-item.rank-me{background:#fff8e1;}
.member-rank,.rank-medal{width:22px;text-align:center;font-weight:800;color:#888;font-size:14px;}
.member-avatar,.rank-avatar{font-size:20px;}
.member-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.member-status{font-size:10px;padding:2px 6px;border-radius:6px;}
.status-focusing{background:#fff3e0;color:#E65100;}
.status-idle{background:#f5f5f5;color:#999;}
.member-time{font-size:11px;color:#2E7D32;font-weight:600;}
.rank-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rank-time{font-size:12px;color:#2E7D32;font-weight:700;}

/* ===== 响应式 ===== */
@media (max-width:480px){
  .room-view-header{flex-wrap:wrap;}
  .room-btn-sm{font-size:10px;padding:4px 6px;}
  .room-toolbar{font-size:11px;gap:6px;}
  .seat{min-height:72px;}
  .seat-avatar{font-size:20px;}
}