/* ===========================
   BASE STYLES
=========================== */
body {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.issue {
  margin-bottom: 20px;
  border: 1.5px solid #ccc;
  padding: 10px;
}

.issue-description {
  font-weight: bold;
  margin-bottom: 10px;
}

/* ===========================
       COMMENT STYLING
    =========================== */
.comment {
  margin-bottom: 20px;
  padding: 15px;
  border: 1.5px solid #dcdcde; /* default border; will be overridden by theme */
  border-radius: 4px;
  background-color: #f6f8fa;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid #dcdcde;
}

.comment-header img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
}

.comment-header .author-info {
  display: flex;
  align-items: center;
  padding-bottom: 5px;
}

.comment-header .author-info .author-name {
  font-weight: bold;
  color: #007bff;
  text-decoration: none;
  margin-right: 5px;
}

.comment-header .author-info .author-name:hover {
  text-decoration: underline;
}

.comment-header .author-info .commented-on {
  margin-right: 5px;
}

.comment-header .author-info .comment-timestamp {
  color: #6a737d;
}

.comments-label {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333238;
}

/* ===========================
       COMMENT TEXTAREA CONTAINER
    =========================== */
.comment-textarea-container {
  margin-top: 20px;
  padding-top: 20px;
  /* Remove visible border */
  border: none;
  position: relative;
}

.comment-textarea-container textarea {
  width: calc(100% - 22px);
  min-height: 100px;
  padding: 10px;
  border: 1.5px solid #dcdcde;
  border-radius: 4px;
  margin-bottom: 10px;
  resize: vertical;
}

/* ===========================
       CURRENT USER AVATAR
       (Placed inside the tab container)
    =========================== */
.tab .current-user-avatar-container {
  margin-left: auto;
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.tab .current-user-avatar-container img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

/* ===========================
       GITLAB-LIKE BUTTONS & TABS
    =========================== */
.gl-button,
.gl-button.btn-block {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  background-color: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1px #bfbfc3;
  font-size: 0.875rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.gl-button:hover,
.gl-button.btn-block:hover {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow:
    inset 0 0 0 1px #bfbfc3,
    0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Tab container */
.tab {
  display: flex;
  align-items: center;
  border-bottom: 1.5px solid #dcdcde;
  margin-bottom: 0;
}

/* Tab links */
.tab .tablinks {
  background-color: #fff;
  color: #333238;
  border: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-right: 2px;
}

/* Active Tab State (Default) */
.tab .tablinks.active {
  background-color: #2bbc8a;
  color: #fff !important;
  border-bottom: 1.5px solid transparent;
}

/* Override Active Tab per Theme */
.beblob-widget.theme-dark .tab .tablinks.active {
  background-color: #2bbc8a;
  color: #1d1f21;
}
.beblob-widget.theme-white .tab .tablinks.active {
  background-color: #cfcfcf;
  color: #333238;
}
.beblob-widget.theme-light .tab .tablinks.active {
  background-color: #d4cfc9;
  color: #333238;
}
.beblob-widget.theme-classic .tab .tablinks.active {
  background-color: #e0e0e0;
  color: #000;
}

/* Add Comment Button */
#addCommentButton {
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border: none;
}

/* GitLab Login Button */
.gitlab-button {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background-color 100ms linear,
    border-color 100ms linear,
    color 100ms linear,
    box-shadow 100ms linear;
}
.gitlab-button img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.gitlab-button:hover {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ===========================
       REACTIONS & REACTION POPUP
    =========================== */

/* Container to center reaction buttons */
.reactions-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Base settings for reaction buttons */
.reaction-btn,
.reaction-toggle-btn,
.reaction-popup-btn {
  display: inline-block;
  height: 40px;
  margin-right: 10px;
  padding: 4px 8px;
  border: 1.5px solid #ccc;
  background-color: #f6f8fa;
  cursor: pointer;
  font-size: 1em;
  border-radius: 8px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
  text-align: center;
  vertical-align: middle;
}

.reaction-btn:hover,
.reaction-toggle-btn:hover,
.reaction-popup-btn:hover {
  background-color: #e0e4e8;
  border-color: #b0b7bd;
}

/* Ensure the reaction toggle button displays its SVG */
.reaction-toggle-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.reaction-toggle-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  vertical-align: middle;
}

/* New container for reaction toggle and popup */
.reaction-container {
  position: relative;
  display: inline-block;
}

/* Updated reaction popup styling: auto-positioned relative to its container */
#reaction-popup {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 5px;
  z-index: 1000;
  border-radius: 8px;
  background-color: #f6f8fa;
  border: 1.5px solid #dcdcde;
  color: inherit;
  display: none;
  white-space: nowrap; /* Ensures buttons remain on one line */
}

#reaction-popup button {
  display: inline-block;
  margin-right: 5px; /* smaller margin between buttons */
}

/* ===========================
       ISSUES CONTAINER
    =========================== */
#issuesContainer {
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  /* No visible border */
  border: none;
  background-color: #f6f8fa;
  color: inherit;
}

/* ===========================
       COMMENT ACTIONS
    =========================== */
.comment-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.auth-button img.gitlab-logo {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

#addCommentButton:disabled {
  background-color: #eee !important;
  color: #aaa !important;
  border: 1.5px solid #ccc !important;
  cursor: not-allowed !important;
}

/* ===========================
       WIDGET & LOADING INDICATOR
    =========================== */
.beblob-widget {
  position: relative;
  min-height: 300px;
}

.loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  color: #555;
}

.spinner {
  display: inline-block;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #555;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto 5px auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ===========================
       THEME SELECTOR
    =========================== */
.theme-selector-container {
  margin-bottom: 10px;
  text-align: right;
}
.theme-selector-container label {
  margin-right: 5px;
}

/* ===========================
       THEME STYLES & OVERRIDES
    =========================== */

/* --- Dark Theme --- */
.beblob-widget.theme-dark {
  background-color: #1d1f21;
  color: #c9cacc;
}
.beblob-widget.theme-dark a {
  color: #4cd69c !important;
}
.beblob-widget.theme-dark .gl-button,
.beblob-widget.theme-dark .reaction-btn,
.beblob-widget.theme-dark .reaction-toggle-btn,
.beblob-widget.theme-dark .reaction-popup-btn,
.beblob-widget.theme-dark .gitlab-button,
.beblob-widget.theme-dark #addCommentButton {
  background-color: #1d1f21;
  color: #c9cacc;
  border: 1.5px solid #2bbc8a;
}
.beblob-widget.theme-dark .gl-button:hover,
.beblob-widget.theme-dark .reaction-btn:hover,
.beblob-widget.theme-dark .reaction-toggle-btn:hover,
.beblob-widget.theme-dark .reaction-popup-btn:hover,
.beblob-widget.theme-dark .gitlab-button:hover,
.beblob-widget.theme-dark #addCommentButton:hover {
  background-color: #2bbc8a;
  color: #1d1f21;
}
/* Reaction Popup for Dark Theme */
.beblob-widget.theme-dark #reaction-popup {
  background-color: #27a47a !important;
  border-color: #2bbc8a !important;
  color: #c9cacc !important;
}
/* Issues Container for Dark Theme */
.beblob-widget.theme-dark #issuesContainer {
  background-color: #1d1f21 !important;
  color: #c9cacc !important;
  border: none;
}
/* Override Comments for Dark Theme */
.beblob-widget.theme-dark .comment {
  background-color: #1d1f21 !important;
  border-color: #2bbc8a !important;
  color: #c9cacc !important;
}
/* CodeMirror for Dark Theme: border from .issue override */
.beblob-widget.theme-dark #Preview,
.beblob-widget.theme-dark .CodeMirror {
  background-color: #1d1f21;
  border: 1.5px solid #2bbc8a !important;
  color: #c9cacc;
}

/* --- White Theme --- */
.beblob-widget.theme-white {
  background-color: #ffffff;
  color: #333238;
}
.beblob-widget.theme-white .gl-button,
.beblob-widget.theme-white .reaction-btn,
.beblob-widget.theme-white .reaction-toggle-btn,
.beblob-widget.theme-white .reaction-popup-btn,
.beblob-widget.theme-white .gitlab-button,
.beblob-widget.theme-white #addCommentButton {
  background-color: #ffffff;
  color: #333238;
  border: 1.5px solid #bfbfc3;
}
.beblob-widget.theme-white .gl-button:hover,
.beblob-widget.theme-white .reaction-btn:hover,
.beblob-widget.theme-white .reaction-toggle-btn:hover,
.beblob-widget.theme-white .reaction-popup-btn:hover,
.beblob-widget.theme-white .gitlab-button:hover,
.beblob-widget.theme-white #addCommentButton:hover {
  background-color: rgba(0, 0, 0, 0.03);
}
.beblob-widget.theme-white .reaction-btn,
.beblob-widget.theme-white .reaction-toggle-btn,
.beblob-widget.theme-white .reaction-popup-btn {
  background-color: #cfcfcf;
  color: #333238;
}
/* Reaction Popup for White Theme */
.beblob-widget.theme-white #reaction-popup {
  background-color: #c0c0c0 !important;
  border-color: #bfbfc3 !important;
  color: #333238 !important;
}
/* Issues Container for White Theme */
.beblob-widget.theme-white #issuesContainer {
  background-color: #ffffff !important;
  color: #333238 !important;
  border: none;
}
/* Override Comments for White Theme */
.beblob-widget.theme-white .comment {
  background-color: #ffffff !important;
  border-color: #bfbfc3 !important;
  color: #333238 !important;
}
/* CodeMirror for White Theme */
.beblob-widget.theme-white #Preview,
.beblob-widget.theme-white .CodeMirror {
  background-color: #ffffff;
  border: 1.5px solid #bfbfc3 !important;
  color: #333238;
}

/* --- Light Theme --- */
.beblob-widget.theme-light {
  background-color: #e2e0de;
  color: #333238;
}
.beblob-widget.theme-light .gl-button,
.beblob-widget.theme-light .reaction-btn,
.beblob-widget.theme-light .reaction-toggle-btn,
.beblob-widget.theme-light .reaction-popup-btn,
.beblob-widget.theme-light .gitlab-button,
.beblob-widget.theme-light #addCommentButton {
  background-color: #e2e0de;
  color: #333238;
  border: 1.5px solid #dcdcde;
}
.beblob-widget.theme-light .gl-button:hover,
.beblob-widget.theme-light .reaction-btn:hover,
.beblob-widget.theme-light .reaction-toggle-btn:hover,
.beblob-widget.theme-light .reaction-popup-btn:hover,
.beblob-widget.theme-light .gitlab-button:hover,
.beblob-widget.theme-light #addCommentButton:hover {
  background-color: #e0e4e8;
  color: #333238;
}
.beblob-widget.theme-light .reaction-btn,
.beblob-widget.theme-light .reaction-toggle-btn,
.beblob-widget.theme-light .reaction-popup-btn {
  background-color: #d4cfc9;
  color: #333238;
}
/* Reaction Popup for Light Theme */
.beblob-widget.theme-light #reaction-popup {
  background-color: #c7c2bd !important;
  border-color: #dcdcde !important;
  color: #333238 !important;
}
/* Issues Container for Light Theme */
.beblob-widget.theme-light #issuesContainer {
  background-color: #e2e0de !important;
  color: #333238 !important;
  border: none;
}
/* Override Comments for Light Theme */
.beblob-widget.theme-light .comment {
  background-color: #e2e0de !important;
  border-color: #dcdcde !important;
  color: #333238 !important;
}
/* CodeMirror for Light Theme */
.beblob-widget.theme-light #Preview,
.beblob-widget.theme-light .CodeMirror {
  background-color: #e2e0de;
  border: 1.5px solid #dcdcde !important;
  color: #333238;
}

/* --- Classic Theme --- */
.beblob-widget.theme-classic {
  background-color: #fafafa;
  color: #000;
}
.beblob-widget.theme-classic .gl-button,
.beblob-widget.theme-classic .reaction-btn,
.beblob-widget.theme-classic .reaction-toggle-btn,
.beblob-widget.theme-classic .reaction-popup-btn,
.beblob-widget.theme-classic .gitlab-button,
.beblob-widget.theme-classic #addCommentButton {
  background-color: #fafafa;
  color: #000;
  border: 1.5px solid #ccc;
}
.beblob-widget.theme-classic .gl-button:hover,
.beblob-widget.theme-classic .reaction-btn:hover,
.beblob-widget.theme-classic .reaction-toggle-btn:hover,
.beblob-widget.theme-classic .reaction-popup-btn:hover,
.beblob-widget.theme-classic .gitlab-button:hover,
.beblob-widget.theme-classic #addCommentButton:hover {
  background-color: #e0e0e0;
  color: #000;
}
.beblob-widget.theme-classic .reaction-btn,
.beblob-widget.theme-classic .reaction-toggle-btn,
.beblob-widget.theme-classic .reaction-popup-btn {
  background-color: #e0e0e0;
  color: #000;
}
/* Reaction Popup for Classic Theme */
.beblob-widget.theme-classic #reaction-popup {
  background-color: #d5d5d5 !important;
  border-color: #ccc !important;
  color: #000 !important;
}
/* Issues Container for Classic Theme */
.beblob-widget.theme-classic #issuesContainer {
  background-color: #fafafa !important;
  color: #000 !important;
  border: none;
}
/* Override Comments for Classic Theme */
.beblob-widget.theme-classic .comment {
  background-color: #fafafa !important;
  border-color: #ccc !important;
  color: #000 !important;
}
/* CodeMirror for Classic Theme */
.beblob-widget.theme-classic #Preview,
.beblob-widget.theme-classic .CodeMirror {
  background-color: #fafafa;
  border: 1.5px solid #ccc !important;
  color: #000;
}

/* ===========================
       EDITOR TOOLBAR BUTTONS (THEMED)
    =========================== */
.editor-toolbar a {
  display: inline-block;
  text-align: center;
  text-decoration: none !important;
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 6px;
  cursor: pointer;
  background-color: transparent;
  color: inherit !important;
  border: 1.5px solid transparent;
}

.beblob-widget.theme-dark .editor-toolbar a {
  background-color: #1d1f21;
  color: #c9cacc !important;
  border: 1.5px solid #2bbc8a;
}
.beblob-widget.theme-dark .editor-toolbar a:hover {
  background-color: #2bbc8a;
  color: #1d1f21 !important;
}

.beblob-widget.theme-white .editor-toolbar a {
  background-color: #ffffff;
  color: #333238 !important;
  border: 1.5px solid #bfbfc3;
}
.beblob-widget.theme-white .editor-toolbar a:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.beblob-widget.theme-light .editor-toolbar a {
  background-color: #e2e0de;
  color: #333238 !important;
  border: 1.5px solid #dcdcde;
}
.beblob-widget.theme-light .editor-toolbar a:hover {
  background-color: #e0e4e8;
}

.beblob-widget.theme-classic .editor-toolbar a {
  background-color: #fafafa;
  color: #000 !important;
  border: 1.5px solid #ccc;
}
.beblob-widget.theme-classic .editor-toolbar a:hover {
  background-color: #f0f0f0;
}

/* ===========================
       UNIFIED MARKDOWN EDITOR STYLES (CodeMirror)
    =========================== */
.beblob-widget.theme-dark #Preview,
.beblob-widget.theme-dark .CodeMirror {
  background-color: #1d1f21;
  border: 1.5px solid #ccc !important;
  color: #c9cacc;
}
.beblob-widget.theme-white #Preview,
.beblob-widget.theme-white .CodeMirror {
  background-color: #ffffff;
  border: 1.5px solid #ccc !important;
  color: #333238;
}
.beblob-widget.theme-light #Preview,
.beblob-widget.theme-light .CodeMirror {
  background-color: #e2e0de;
  border: 1.5px solid #ccc !important;
  color: #333238;
}
.beblob-widget.theme-classic #Preview,
.beblob-widget.theme-classic .CodeMirror {
  background-color: #fafafa;
  border: 1.5px solid #ccc !important;
  color: #000;
}

.CodeMirror pre,
.CodeMirror-line {
  color: inherit;
}

.CodeMirror-placeholder {
  color: #999;
}
.beblob-widget.theme-dark .CodeMirror-placeholder {
  color: #c9cacc;
}
/* Ensure dark theme cursor is visible */
.beblob-widget.theme-dark .CodeMirror-cursor {
  border-left: 1px solid #c9cacc !important;
}