/* ==========================================================================
   SealDice AirSP · QQ Chat View Styles
   ========================================================================== */

.main-container.is-qq-chat-active {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 60px) !important;
  min-height: 0 !important;
}

#sealdice-qq-chat-view {
  display: flex;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  background: #f4f5f7;
  color: #333333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 0;
  border: none;
  margin: 0;
  position: relative;
  z-index: 10;
}

/* --------------------------------------------------------------------------
   Left Sidebar: Group List
   -------------------------------------------------------------------------- */
.qq-chat-sidebar {
  width: 290px;
  min-width: 260px;
  max-width: 320px;
  background: #ffffff;
  border-right: 1px solid #e5e6eb;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.qq-chat-type-switcher {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  background: #ffffff;
  border-bottom: 1px solid #f0f0f2;
}

.qq-chat-type-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  background: #f5f7fa;
  color: #606266;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.qq-chat-type-btn:hover {
  background: #eef2f8;
  color: #0099ff;
  border-color: #b3d8ff;
}

.qq-chat-type-btn.active {
  background: #0099ff;
  color: #ffffff;
  border-color: #0099ff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 153, 255, 0.25);
}

.qq-chat-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #f0f0f2;
  background: #fafafa;
}

.qq-chat-search-input {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  border-radius: 16px;
  border: 1px solid #dcdfe6;
  background: #ffffff;
  color: #333333;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.qq-chat-search-input:focus {
  border-color: #0099ff;
  box-shadow: 0 0 0 2px rgba(0, 153, 255, 0.15);
}

.qq-chat-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #dcdfe6;
  background: #ffffff;
  color: #606266;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
}

.qq-chat-icon-btn:hover {
  background: #f2f3f5;
  color: #0099ff;
  border-color: #0099ff;
}

.qq-chat-scope-tabs {
  display: flex;
  padding: 6px 12px;
  gap: 6px;
  background: #f7f8fa;
  border-bottom: 1px solid #eef0f3;
}

.qq-chat-scope-tab {
  flex: 1;
  padding: 4px 0;
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  background: #ffffff;
  color: #606266;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.qq-chat-scope-tab:hover {
  border-color: #0099ff;
  color: #0099ff;
}

.qq-chat-scope-tab.active {
  background: #0099ff;
  border-color: #0099ff;
  color: #ffffff;
}

.qq-chat-filter-tabs {
  display: flex;
  padding: 8px 12px;
  gap: 6px;
  border-bottom: 1px solid #f0f0f2;
}

.qq-chat-filter-tab {
  flex: 1;
  padding: 5px 0;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: #606266;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.qq-chat-filter-tab:hover {
  background: #f0f2f5;
}

.qq-chat-filter-tab.active {
  background: #0099ff;
  color: #ffffff;
}

.qq-chat-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid #f0f0f2;
  background: #fafafa;
  font-size: 12px;
  color: #606266;
}

.qq-chat-page-btn {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background: #ffffff;
  color: #333333;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.qq-chat-page-btn:hover:not(:disabled) {
  border-color: #0099ff;
  color: #0099ff;
}

.qq-chat-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.qq-chat-page-indicator {
  font-size: 11px;
  color: #8c8c8c;
  user-select: none;
}

.qq-chat-load-more-bar {
  display: flex;
  justify-content: center;
  padding: 10px 0;
  margin-bottom: 8px;
}

.qq-chat-load-more-btn {
  padding: 5px 14px;
  border-radius: 14px;
  border: 1px solid #dcdfe6;
  background: #ffffff;
  color: #0099ff;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}

.qq-chat-load-more-btn:hover {
  background: #e8f4ff;
  border-color: #0099ff;
}

.qq-chat-load-more-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.qq-chat-group-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.qq-chat-group-list::-webkit-scrollbar {
  width: 5px;
}

.qq-chat-group-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.qq-chat-group-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background-color 0.15s;
  border-bottom: 1px solid #f7f7f9;
  position: relative;
}

.qq-chat-group-item:hover {
  background-color: #f5f7fa;
}

.qq-chat-group-item.active {
  background-color: #e8f4ff;
}

.qq-chat-group-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #0099ff;
}

.qq-chat-group-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1890ff, #36cfc9);
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  user-select: none;
}

.qq-chat-group-avatar.official {
  background: linear-gradient(135deg, #00b4db, #0083b0);
}

.qq-chat-group-content {
  flex: 1;
  min-width: 0;
}

.qq-chat-group-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.qq-chat-group-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #1f2329;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

.qq-chat-group-time {
  font-size: 11px;
  color: #8f959e;
  flex-shrink: 0;
}

.qq-chat-group-desc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.qq-chat-group-snippet {
  font-size: 12px;
  color: #646a73;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.qq-chat-group-badges {
  display: flex;
  align-items: center;
  gap: 4px;
}

.qq-chat-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 500;
  line-height: 1.3;
}

.qq-chat-badge-official {
  background: #e6f7ff;
  color: #0070cc;
  border: 1px solid #91d5ff;
}

.qq-chat-badge-private {
  background: #f0f5ff;
  color: #2f54eb;
  border: 1px solid #adc6ff;
}

.qq-chat-badge-status-on {
  background: #f6ffed;
  color: #389e0d;
  border: 1px solid #b7eb8f;
}

.qq-chat-badge-status-off {
  background: #f5f5f5;
  color: #8c8c8c;
  border: 1px solid #d9d9d9;
}

.qq-chat-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4d4f;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Right Main: Chat Stream & Input
   -------------------------------------------------------------------------- */
.qq-chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f7f8fa;
}

/* Header */
.qq-chat-header {
  height: 56px;
  background: #ffffff;
  border-bottom: 1px solid #e5e6eb;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.qq-chat-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qq-chat-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0099ff, #69c0ff);
  color: #ffffff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.qq-chat-header-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qq-chat-header-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f2329;
}

.qq-chat-header-subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #8f959e;
  margin-top: 1px;
}

.qq-chat-copy-id-btn {
  background: none;
  border: 1px solid #dcdfe6;
  border-radius: 3px;
  padding: 0 4px;
  font-size: 10px;
  color: #606266;
  cursor: pointer;
  transition: all 0.15s;
}

.qq-chat-copy-id-btn:hover {
  color: #0099ff;
  border-color: #0099ff;
}

.qq-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qq-chat-auto-scroll-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #606266;
  cursor: pointer;
  user-select: none;
}

.qq-chat-btn {
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background: #ffffff;
  color: #606266;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.qq-chat-btn:hover {
  background: #f2f3f5;
  color: #0099ff;
  border-color: #0099ff;
}

.qq-chat-btn-clear:hover {
  color: #ff4d4f;
  border-color: #ff4d4f;
}

/* Message Timeline Area */
.qq-chat-messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
}

.qq-chat-messages-container::-webkit-scrollbar {
  width: 6px;
}

.qq-chat-messages-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}

.qq-chat-messages-stream {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qq-chat-empty-hint {
  margin: auto;
  text-align: center;
  color: #8f959e;
  font-size: 14px;
  padding: 40px 0;
}

.qq-chat-time-divider {
  display: flex;
  justify-content: center;
  margin: 6px 0;
}

.qq-chat-time-divider span {
  font-size: 11px;
  color: #8f959e;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 10px;
  border-radius: 10px;
}

/* Message Rows */
.qq-chat-msg-row {
  display: flex;
  gap: 10px;
  max-width: 85%;
  align-items: flex-start;
}

.qq-chat-msg-left {
  align-self: flex-start;
}

.qq-chat-msg-right {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.qq-chat-msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #ffffff;
  font-weight: bold;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.qq-chat-msg-avatar,
.qq-chat-group-avatar,
.qq-chat-header-avatar {
  position: relative;
  overflow: hidden;
}

.qq-chat-avatar-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.qq-chat-avatar-bot {
  background: linear-gradient(135deg, #0099ff, #73d13d) !important;
}

.qq-chat-msg-content-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.qq-chat-msg-left .qq-chat-msg-content-wrap {
  align-items: flex-start;
}

.qq-chat-msg-right .qq-chat-msg-content-wrap {
  align-items: flex-end;
}

.qq-chat-msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 12px;
}

.qq-chat-msg-sender {
  font-weight: 500;
  color: #646a73;
}

.qq-chat-id-tag {
  background: #f0f5ff;
  color: #2f54eb;
  border: 1px solid #adc6ff;
  border-radius: 4px;
  padding: 0 4px;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.qq-chat-simulated-tag {
  background: #fff7e6;
  color: #ad6800;
  border: 1px solid #ffd591;
  border-radius: 4px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
}

.qq-chat-bot-tag {
  background: #722ed1;
  color: #ffffff;
  border-radius: 3px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.qq-chat-msg-time {
  font-size: 11px;
  color: #8f959e;
}

/* Chat Bubbles */
.qq-chat-msg-bubble {
  padding: 10px 14px;
  border-radius: 4px 14px 14px 14px;
  background: #ffffff;
  color: #1f2329;
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  word-break: break-word;
  white-space: pre-wrap;
  position: relative;
  max-width: 100%;
}

.qq-chat-msg-right .qq-chat-msg-bubble {
  border-radius: 14px 4px 14px 14px;
  background: #0099ff;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 153, 255, 0.25);
}

.qq-chat-msg-bubble a {
  color: #1890ff;
  text-decoration: underline;
}

.qq-chat-msg-right .qq-chat-msg-bubble a {
  color: #d6f0ff;
}

.qq-chat-at {
  color: #0070cc;
  background: rgba(0, 112, 204, 0.08);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 500;
}

.qq-chat-msg-right .qq-chat-at {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.25);
}

/* Image Cards & Thumbnails */
.qq-chat-img-card {
  position: relative;
  display: inline-block;
  margin-top: 6px;
  border-radius: 8px;
  overflow: hidden;
  max-width: 320px;
  cursor: pointer;
  user-select: none;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  vertical-align: top;
}

.qq-chat-img-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.qq-chat-img-thumb-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.qq-chat-img {
  max-width: 320px;
  max-height: 280px;
  min-width: 60px;
  min-height: 60px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  transition: opacity 0.2s, transform 0.25s ease;
}

.qq-chat-img-card:hover .qq-chat-img {
  transform: scale(1.02);
}

.qq-chat-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.55) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.qq-chat-img-card:hover .qq-chat-img-overlay {
  opacity: 1;
}

.qq-chat-img-zoom-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(20, 20, 20, 0.75);
  color: #ffffff;
  padding: 3px 9px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 500;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Image Load Error Fallback */
.qq-chat-img-card.img-load-error .qq-chat-img-thumb-wrap {
  display: none;
}

.qq-chat-img-error-hint {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  gap: 6px;
  min-width: 140px;
  background: #fff2f0;
  border: 1px dashed #ffccc7;
  border-radius: 8px;
  color: #ff4d4f;
  font-size: 12px;
}

.qq-chat-img-card.img-load-error .qq-chat-img-error-hint {
  display: flex;
}

.qq-chat-img-retry-link {
  font-size: 11px;
  color: #1890ff;
  text-decoration: underline;
  cursor: pointer;
}

.qq-chat-img-retry-link:hover {
  color: #40a9ff;
}

/* Input Area */
.qq-chat-footer {
  background: #ffffff;
  border-top: 1px solid #e5e6eb;
  padding: 10px 18px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qq-chat-input-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 11.5px;
  color: #8f959e;
}

.qq-chat-compose-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 30px;
  padding: 2px 0;
}

.qq-chat-member-select,
.qq-chat-sticker-select {
  min-width: 132px;
  max-width: 240px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  background: #fcfcfd;
  color: #4e5969;
  font-size: 12px;
  outline: none;
}

.qq-chat-member-select:focus,
.qq-chat-sticker-select:focus {
  border-color: #0099ff;
  box-shadow: 0 0 0 2px rgba(0, 153, 255, 0.12);
}

.qq-chat-tool-btn {
  height: 30px;
  padding: 0 10px;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  background: #ffffff;
  color: #4e5969;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.qq-chat-tool-btn:hover:not(:disabled) {
  border-color: #0099ff;
  color: #0077c8;
  background: #f0f8ff;
}

.qq-chat-tool-btn:disabled,
.qq-chat-member-select:disabled,
.qq-chat-sticker-select:disabled {
  color: #b8bec8;
  background: #f5f6f7;
  cursor: not-allowed;
}

.qq-chat-mute-btn {
  color: #c41d7f;
  border-color: #f3c4dd;
}

.qq-chat-mute-btn:hover:not(:disabled) {
  color: #a8075a;
  border-color: #eb2f96;
  background: #fff0f6;
}

.qq-chat-compose-status {
  min-width: 0;
  color: #8f959e;
  font-size: 11px;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qq-chat-btn-favorite {
  color: #ad6800;
  border-color: #ffd591;
}

.qq-chat-btn-favorite:hover {
  color: #874d00;
  border-color: #d48806;
  background: #fffaf0;
}

.qq-chat-sim-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ad6800;
  cursor: pointer;
  white-space: nowrap;
}

.qq-chat-sim-toggle input {
  accent-color: #d48806;
}

.qq-chat-simulate-name {
  width: 112px;
  padding: 3px 7px;
  border: 1px solid #ffd591;
  border-radius: 4px;
  color: #614700;
  background: #fffaf0;
  font-size: 11px;
  outline: none;
}

.qq-chat-simulate-name:focus {
  border-color: #d48806;
  box-shadow: 0 0 0 2px rgba(212, 136, 6, 0.12);
}

.qq-chat-toolbar-tip {
  display: flex;
  align-items: center;
  gap: 4px;
}

.qq-chat-input-box {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.qq-chat-textarea {
  flex: 1;
  min-height: 60px;
  max-height: 140px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  background: #fcfcfd;
  color: #333333;
  font-size: 13.5px;
  line-height: 1.45;
  resize: vertical;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.qq-chat-textarea:focus {
  border-color: #0099ff;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(0, 153, 255, 0.15);
}

.qq-chat-send-btn {
  height: 38px;
  padding: 0 18px;
  border-radius: 6px;
  border: none;
  background: #0099ff;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  transition: background-color 0.2s, transform 0.1s;
  box-shadow: 0 2px 6px rgba(0, 153, 255, 0.3);
}

.qq-chat-send-btn:hover:not(:disabled) {
  background: #1aafff;
  transform: translateY(-1px);
}

.qq-chat-send-btn:active:not(:disabled) {
  transform: translateY(0);
}

.qq-chat-send-btn:disabled {
  background: #b0c4de;
  cursor: not-allowed;
  box-shadow: none;
}

/* Toast Message */
.qq-chat-toast {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 12.5px;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s;
}

.qq-chat-toast.error {
  background: #f5222d;
}

.qq-chat-toast.success {
  background: #52c41a;
}

/* --------------------------------------------------------------------------
   Eldritch Study Theme Compatibility
   -------------------------------------------------------------------------- */
.eldritch-study #sealdice-qq-chat-view {
  background: #140d09 !important;
  color: #d6c69d !important;
  border: 1px solid rgba(185, 151, 88, 0.42) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

.eldritch-study .qq-chat-sidebar {
  background: linear-gradient(180deg, #18100a, #1f150e) !important;
  border-right-color: rgba(185, 151, 88, 0.25) !important;
}

.eldritch-study .qq-chat-type-switcher,
.eldritch-study .qq-chat-search-wrap,
.eldritch-study .qq-chat-filter-tabs {
  background: rgba(16, 10, 7, 0.7) !important;
  border-bottom-color: rgba(185, 151, 88, 0.2) !important;
}

.eldritch-study .qq-chat-type-btn {
  background: rgba(35, 23, 16, 0.8) !important;
  border-color: rgba(185, 151, 88, 0.3) !important;
  color: #c7b995 !important;
}

.eldritch-study .qq-chat-type-btn:hover {
  border-color: #d4af37 !important;
  color: #f0ddaa !important;
}

.eldritch-study .qq-chat-type-btn.active {
  background: linear-gradient(90deg, #7c622b, #b38b39) !important;
  border-color: #d4af37 !important;
  color: #fff9e6 !important;
}

.eldritch-study .qq-chat-badge-private {
  background: rgba(185, 151, 88, 0.15) !important;
  color: #d4af37 !important;
  border-color: rgba(212, 175, 55, 0.35) !important;
}

.eldritch-study .qq-chat-search-input {
  background: rgba(30, 20, 14, 0.85) !important;
  border-color: rgba(185, 151, 88, 0.35) !important;
  color: #f0d98f !important;
}

.eldritch-study .qq-chat-search-input:focus {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2) !important;
}

.eldritch-study .qq-chat-icon-btn {
  background: rgba(35, 24, 16, 0.8) !important;
  border-color: rgba(185, 151, 88, 0.3) !important;
  color: #c7b995 !important;
}

.eldritch-study .qq-chat-icon-btn:hover {
  color: #f0ddaa !important;
  border-color: #d4af37 !important;
}

.eldritch-study .qq-chat-filter-tab {
  color: #a89a78 !important;
}

.eldritch-study .qq-chat-filter-tab:hover {
  background: rgba(93, 121, 91, 0.15) !important;
}

.eldritch-study .qq-chat-filter-tab.active {
  background: linear-gradient(90deg, #5d795b, #455a43) !important;
  color: #fff9e6 !important;
}

.eldritch-study .qq-chat-group-item {
  border-bottom-color: rgba(185, 151, 88, 0.1) !important;
}

.eldritch-study .qq-chat-group-item:hover {
  background: rgba(72, 105, 84, 0.2) !important;
}

.eldritch-study .qq-chat-group-item.active {
  background: rgba(93, 121, 91, 0.28) !important;
}

.eldritch-study .qq-chat-group-item.active::before {
  background: #d4af37 !important;
}

.eldritch-study .qq-chat-group-name {
  color: #f0ddaa !important;
}

.eldritch-study .qq-chat-group-snippet {
  color: #9e8e6d !important;
}

.eldritch-study .qq-chat-main {
  background: #110906 !important;
}

.eldritch-study .qq-chat-header {
  background: rgba(22, 14, 10, 0.95) !important;
  border-bottom-color: rgba(185, 151, 88, 0.25) !important;
}

.eldritch-study .qq-chat-header-title {
  color: #f0ddaa !important;
}

.eldritch-study .qq-chat-btn {
  background: rgba(35, 23, 16, 0.8) !important;
  border-color: rgba(185, 151, 88, 0.3) !important;
  color: #c7b995 !important;
}

.eldritch-study .qq-chat-btn:hover {
  background: rgba(93, 121, 91, 0.3) !important;
  color: #f0d98f !important;
  border-color: #d4af37 !important;
}

.eldritch-study .qq-chat-msg-bubble {
  background: rgba(32, 21, 15, 0.9) !important;
  color: #e5d6b3 !important;
  border: 1px solid rgba(185, 151, 88, 0.25) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.eldritch-study .qq-chat-msg-right .qq-chat-msg-bubble {
  background: linear-gradient(135deg, #445942, #324431) !important;
  color: #fff8e1 !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
}

.eldritch-study .qq-chat-footer {
  background: rgba(22, 14, 10, 0.95) !important;
  border-top-color: rgba(185, 151, 88, 0.25) !important;
}

.eldritch-study .qq-chat-textarea {
  background: rgba(28, 18, 12, 0.9) !important;
  border-color: rgba(185, 151, 88, 0.3) !important;
  color: #f0ddaa !important;
}

.eldritch-study .qq-chat-textarea:focus {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2) !important;
}

.eldritch-study .qq-chat-send-btn {
  background: linear-gradient(135deg, #7c622b, #b38b39) !important;
  color: #fff9e6 !important;
  box-shadow: 0 2px 8px rgba(179, 139, 57, 0.3) !important;
}

.eldritch-study .qq-chat-id-tag {
  background: rgba(185, 151, 88, 0.15) !important;
  color: #d4af37 !important;
  border-color: rgba(212, 175, 55, 0.35) !important;
}

.eldritch-study .qq-chat-scope-tabs {
  background: rgba(16, 10, 7, 0.9) !important;
  border-bottom-color: rgba(185, 151, 88, 0.2) !important;
}

.eldritch-study .qq-chat-scope-tab {
  background: rgba(35, 23, 16, 0.8) !important;
  border-color: rgba(185, 151, 88, 0.3) !important;
  color: #c7b995 !important;
}

.eldritch-study .qq-chat-scope-tab:hover {
  border-color: #d4af37 !important;
  color: #f0ddaa !important;
}

.eldritch-study .qq-chat-scope-tab.active {
  background: linear-gradient(90deg, #7c622b, #b38b39) !important;
  border-color: #d4af37 !important;
  color: #fff9e6 !important;
}

.eldritch-study .qq-chat-pagination-bar {
  background: rgba(18, 12, 8, 0.95) !important;
  border-top-color: rgba(185, 151, 88, 0.25) !important;
}

.eldritch-study .qq-chat-page-btn {
  background: rgba(35, 23, 16, 0.8) !important;
  border-color: rgba(185, 151, 88, 0.3) !important;
  color: #c7b995 !important;
}

.eldritch-study .qq-chat-page-btn:hover:not(:disabled) {
  border-color: #d4af37 !important;
  color: #f0ddaa !important;
}

.eldritch-study .qq-chat-page-indicator {
  color: #a89a78 !important;
}

.eldritch-study .qq-chat-load-more-btn {
  background: rgba(35, 23, 16, 0.9) !important;
  border-color: rgba(185, 151, 88, 0.35) !important;
  color: #d4af37 !important;
}

.eldritch-study .qq-chat-load-more-btn:hover {
  background: rgba(93, 121, 91, 0.25) !important;
  border-color: #d4af37 !important;
  color: #f0ddaa !important;
}

/* --------------------------------------------------------------------------
   Lightbox Modal & Image Viewer
   -------------------------------------------------------------------------- */
body.qq-chat-lightbox-open {
  overflow: hidden !important;
}

.qq-chat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: qqChatFadeIn 0.2s ease-out;
}

@keyframes qqChatFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.qq-chat-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 20, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: zoom-out;
}

.qq-chat-lightbox-container {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.qq-chat-lightbox-topbar {
  pointer-events: auto;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: linear-gradient(180deg, rgba(15, 20, 30, 0.6) 0%, rgba(15, 20, 30, 0) 100%);
  color: #ffffff;
}

.qq-chat-lightbox-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #e6f7ff;
}

.qq-chat-lightbox-zoom-indicator {
  background: rgba(255, 255, 255, 0.15);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: Consolas, Monaco, monospace;
}

.qq-chat-lightbox-dim-indicator {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

.qq-chat-lightbox-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qq-chat-lightbox-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  padding: 0;
}

.qq-chat-lightbox-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.qq-chat-lightbox-btn:active {
  transform: translateY(0);
}

.qq-chat-lightbox-close-btn {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.qq-chat-lightbox-close-btn:hover {
  background: #ff4d4f;
  border-color: #ff4d4f;
}

.qq-chat-lightbox-stage {
  pointer-events: auto;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: grab;
  position: relative;
  touch-action: none;
}

.qq-chat-lightbox-stage.is-dragging {
  cursor: grabbing;
}

.qq-chat-lightbox-stage-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.qq-chat-lightbox-image {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.65);
  transition: transform 0.08s ease-out;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

.qq-chat-lightbox-stage.is-dragging .qq-chat-lightbox-image {
  transition: none !important;
}

/* Floating Bottom Toolbar */
.qq-chat-lightbox-toolbar {
  pointer-events: auto;
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(20, 24, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 10;
}

.qq-chat-lightbox-zoom-val {
  color: #ffffff;
  font-size: 12px;
  font-family: Consolas, Monaco, monospace;
  font-weight: 600;
  min-width: 48px;
  text-align: center;
  user-select: none;
}

.qq-chat-lightbox-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 4px;
}

/* Eldritch Study Theme - Lightbox & Image Cards */
.eldritch-study .qq-chat-img-card {
  background: rgba(30, 20, 14, 0.9) !important;
  border-color: rgba(185, 151, 88, 0.35) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4) !important;
}

.eldritch-study .qq-chat-img-card:hover {
  border-color: #d4af37 !important;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.25) !important;
}

.eldritch-study .qq-chat-img-zoom-tag {
  background: rgba(35, 24, 16, 0.9) !important;
  color: #f0ddaa !important;
  border: 1px solid rgba(185, 151, 88, 0.4) !important;
}

.eldritch-study .qq-chat-img-error-hint {
  background: rgba(45, 18, 14, 0.9) !important;
  border-color: rgba(217, 74, 56, 0.4) !important;
  color: #ff7875 !important;
}

.eldritch-study .qq-chat-lightbox-backdrop {
  background: rgba(8, 5, 3, 0.92) !important;
}

.eldritch-study .qq-chat-lightbox-topbar {
  background: linear-gradient(180deg, rgba(20, 13, 9, 0.8) 0%, rgba(20, 13, 9, 0) 100%) !important;
}

.eldritch-study .qq-chat-lightbox-zoom-indicator {
  background: rgba(185, 151, 88, 0.2) !important;
  color: #f0ddaa !important;
  border: 1px solid rgba(185, 151, 88, 0.35) !important;
}

.eldritch-study .qq-chat-lightbox-dim-indicator {
  color: #c7b995 !important;
}

.eldritch-study .qq-chat-lightbox-toolbar {
  background: rgba(24, 16, 11, 0.92) !important;
  border-color: rgba(185, 151, 88, 0.4) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7) !important;
}

.eldritch-study .qq-chat-lightbox-btn {
  background: rgba(40, 27, 18, 0.8) !important;
  border-color: rgba(185, 151, 88, 0.3) !important;
  color: #e5d6b3 !important;
}

.eldritch-study .qq-chat-lightbox-btn:hover {
  background: rgba(93, 121, 91, 0.35) !important;
  border-color: #d4af37 !important;
  color: #fff9e6 !important;
}

.eldritch-study .qq-chat-lightbox-zoom-val {
  color: #f0ddaa !important;
}

.eldritch-study .qq-chat-lightbox-divider {
  background: rgba(185, 151, 88, 0.25) !important;
}

@media (max-width: 700px) {
  .main-container.is-qq-chat-active {
    height: calc(100dvh - 60px) !important;
  }

  #sealdice-qq-chat-view {
    flex-direction: column;
  }

  .qq-chat-sidebar {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 42%;
    min-height: 300px;
    border-right: 0;
    border-bottom: 1px solid #e5e6eb;
  }

  .qq-chat-main {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
  }

  .qq-chat-header {
    height: auto;
    min-height: 78px;
    padding: 6px 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .qq-chat-header-actions {
    justify-content: flex-end;
  }

  .qq-chat-group-list {
    min-height: 64px;
  }

  .qq-chat-pagination-bar {
    flex-shrink: 0;
  }

  .qq-chat-header-info > div:last-child {
    min-width: 0;
    flex: 1;
  }

  .qq-chat-header-id {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .qq-chat-header-avatar {
    flex-shrink: 0;
  }

  .qq-chat-header-info,
  .qq-chat-header-title-row {
    min-width: 0;
  }

  .qq-chat-header-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .qq-chat-footer {
    padding: 8px 10px;
  }

  .qq-chat-compose-tools {
    align-items: stretch;
    gap: 5px;
  }

  .qq-chat-member-select,
  .qq-chat-sticker-select,
  .qq-chat-tool-btn {
    min-width: 0;
    max-width: none;
    flex: 1 1 calc(50% - 5px);
  }

  .qq-chat-compose-status {
    flex: 1 1 100%;
    line-height: 22px;
    min-height: 22px;
  }

  .qq-chat-lightbox-toolbar {
    max-width: calc(100vw - 12px);
    overflow-x: auto;
  }
}
.qq-chat-account-label { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 12px; }
.qq-chat-endpoint { max-width: 100%; min-width: 0; flex: 1; padding: 6px; border: 1px solid #d6dce5; border-radius: 6px; color: inherit; background: transparent; }

/* Private chat rich messages and authenticated sticker thumbnails. */
.qq-chat-quote{border-left:3px solid #7895c7;background:rgba(100,130,180,.12);padding:10px 12px;margin-bottom:10px;border-radius:6px;max-width:100%;overflow-wrap:anywhere}
.qq-chat-quote-heading,.qq-chat-forward-author{font-size:12px;font-weight:600;color:#6e85ab;margin-bottom:6px}
.qq-chat-message-body:empty{display:none}
.qq-chat-forward{border:1px solid rgba(130,150,180,.3);border-radius:8px;margin-top:10px;max-width:100%;overflow:hidden}
.qq-chat-forward>summary{cursor:pointer;padding:10px;background:rgba(100,130,180,.1);font-weight:600}
.qq-chat-forward-nodes{max-height:480px;overflow:auto}
.qq-chat-forward-node{padding:10px;border-top:1px solid rgba(130,150,180,.2);overflow-wrap:anywhere}
.qq-chat-forward-author time{font-weight:normal;opacity:.7}
.qq-chat-rich-hint{padding:8px;color:#8b93a3;font-size:12px}
.qq-chat-rich-load{margin:8px;border:1px solid #8aa1c6;border-radius:6px;padding:6px 10px;background:transparent;color:inherit;cursor:pointer}
.qq-chat-sticker-tools{position:relative;display:flex;align-items:center;gap:6px;min-width:0}
.qq-chat-sticker-tools [hidden]{display:none!important}
.qq-chat-sticker-picker{position:absolute;bottom:calc(100% + 8px);left:0;width:320px;max-width:calc(100vw - 48px);padding:10px;border:1px solid #8fa1bb;border-radius:10px;background:var(--el-bg-color,#fff);color:var(--el-text-color-primary,#303133);box-shadow:0 6px 24px #0003;z-index:20}
.qq-chat-sticker-heading{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px}
.qq-chat-sticker-clear{cursor:pointer;border:0;background:transparent;color:inherit}
.qq-chat-sticker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:300px;overflow:auto}
.qq-chat-sticker-tile{display:flex;flex-direction:column;align-items:center;padding:5px;gap:4px;min-width:0;background:transparent;color:inherit;border:1px solid #8b9db633;border-radius:8px;cursor:pointer}
.qq-chat-sticker-tile:hover{background:#86a4d526}
.qq-chat-sticker-tile img{width:56px;height:56px;object-fit:contain}
.qq-chat-sticker-tile span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.qq-chat-sticker-preview{display:flex;align-items:center;gap:4px;min-width:0;max-width:140px}
.qq-chat-sticker-preview img{width:32px;height:32px;object-fit:contain}
.qq-chat-sticker-preview span{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qq-chat-compose-tools{flex-wrap:wrap}
.qq-chat-lightbox-toolbar{flex-wrap:wrap}
@media(max-width:600px){.qq-chat-sticker-picker{left:auto;right:0;width:280px}.qq-chat-forward-nodes{max-height:360px}}
#sealdice-qq-chat-view [hidden] { display: none !important; }
.qq-chat-openid-badge { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 5px; background: rgba(128,145,180,.12); overflow-wrap: anywhere; }
.qq-chat-group-memo { font-size: 12px; color: var(--qq-text-secondary, #667085); max-height: 48px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 4px; }
.qq-group-console { flex: 0 1 auto; max-height: 58%; min-height: 0; overflow: auto; border-bottom: 1px solid var(--qq-border, #dce3ec); background: var(--qq-bg, #f8fafc); color: var(--qq-text, #25334b); padding: 12px 18px; }
.qq-group-console [hidden] { display: none !important; }
.qq-group-top, .qq-group-toolbar, .qq-group-tabs, .qq-group-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.qq-group-top strong { margin-right: auto; }
.qq-group-state { padding: 10px 0; font-size: 12px; overflow-wrap: anywhere; }
.qq-group-console button { border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 10px; cursor: pointer; background: #fff; color: #334155; }
.qq-group-console button:disabled { opacity: .45; cursor: default; }
.qq-group-tabs { padding-bottom: 10px; border-bottom: 1px solid #dce3ec; }
.qq-group-tabs .active, .qq-group-console .qq-group-primary { color: #fff; background: #3973cf; border-color: #3973cf; }
.qq-group-body { padding-top: 10px; font-size: 13px; line-height: 1.6; }
.qq-group-note { font-size: 12px; color: #64748b; }
.qq-group-result { white-space: pre-wrap; color: #b45309; padding: 5px 0; overflow-wrap: anywhere; }
.qq-group-card { background: #fff; border: 1px solid #dce3ec; border-radius: 8px; margin: 8px 0; padding: 10px 12px; overflow-wrap: anywhere; }
.qq-group-card > small { display: block; color: #64748b; font-size: 11px; }
.qq-group-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0; }
.qq-group-text-heading { font-weight: 700; font-size: 15px; }
.qq-group-text-quote { padding-left: 10px; border-left: 3px solid #9bbbea; color: #64748b; }
.qq-group-text-list { padding-left: 14px; }
.qq-group-text-list::before { content: '• '; }
.qq-group-text code { padding: 1px 4px; border-radius: 4px; background: #eef2f7; }
.qq-group-text .katex-display { overflow: auto; }
.qq-group-mute-form { max-width: 640px; display: grid; gap: 8px; }
.qq-group-mute-form label { display: grid; gap: 3px; }
.qq-group-console input:not([type=checkbox]), .qq-group-console textarea { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 5px; color: #334155; background: #fff; min-width: 0; max-width: 100%; box-sizing: border-box; }
.qq-group-mute-form > button { justify-self: start; }
.qq-group-toolbar { margin: 8px 0; }
.qq-group-inline { font-size: 12px; }
.qq-group-inline input { width: 130px; }
@media (max-width: 640px) { .qq-group-console { padding: 10px; max-height: 65%; } .qq-group-top, .qq-group-tabs { gap: 5px; } .qq-group-toolbar input:not([type=checkbox]) { width: 100%; } }