/* =========================================================
   CelebIsland "Obsidian and Emerald" redesign -- Phase 7b (Settings)
   Restyles WoWonder's real settings shell (setting/content.phtml,
   setting/user-setting-sidebar.phtml, and every setting/*.phtml
   sub-panel) onto the existing ci- tokens. No markup changes -- every
   rule below targets classes Wondertag already renders. Messages/chat
   gets its own block further down in this same file.
   ========================================================= */

/* ---------- Settings sidebar nav ---------- */
.tag_sett_sidebar {
  background: var(--ci-surface) !important;
  border: 1px solid var(--ci-line) !important;
  border-radius: var(--ci-r-lg) !important;
  box-shadow: none !important;
  padding: 18px 14px !important;
}
.tag_sett_sidebar > p.bold {
  color: var(--ci-text-4) !important;
  font: 800 11px var(--ci-font-body) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 18px 10px 6px !important;
}
.tag_sett_sidebar > p.bold:first-child { margin-top: 4px !important; }
.tag_sett_sidebar > hr { border-color: var(--ci-line) !important; opacity: 1; margin: 10px 0 !important; }
.tag_sett_sidebar > li { margin: 2px 0 !important; }
.tag_sett_sidebar > li > a {
  display: flex !important; align-items: center; gap: 10px;
  color: var(--ci-text-2) !important; border-radius: var(--ci-r-md) !important;
  padding: 10px 12px !important; font-weight: 600; font-size: 14px;
  transition: background var(--ci-dur) var(--ci-ease), color var(--ci-dur) var(--ci-ease);
}
.tag_sett_sidebar > li > a:hover { background: var(--ci-surface-2) !important; color: var(--ci-bone) !important; }
.tag_sett_sidebar > li.active > a { background: var(--ci-green-soft) !important; color: var(--ci-green-text) !important; }
.tag_sett_sidebar > li.active > a span { color: var(--ci-green-text) !important; }

/* ---------- Settings panel container ---------- */
.wow_sett_content, .tag_sett_page > .wow_content {
  background: var(--ci-surface) !important;
  border: 1px solid var(--ci-line) !important;
  border-radius: var(--ci-r-lg) !important;
  box-shadow: none !important;
  color: var(--ci-text-2);
}
.wow_sett_content h4, .wow_sett_content h3, .wow_sett_content .bold { color: var(--ci-bone) !important; }
.wow_sett_content hr { border-color: var(--ci-line) !important; opacity: 1; }

/* Form fields inside settings -- same visual language as login/register
   without touching the shared .tag_field class used site-wide elsewhere. */
.wow_sett_content .tag_field > input,
.wow_sett_content .tag_field > textarea,
.wow_sett_content .tag_field > select {
  background: var(--ci-ink) !important;
  color: var(--ci-bone) !important;
  border-bottom-color: var(--ci-line-strong) !important;
}
.wow_sett_content .tag_field > input:hover,
.wow_sett_content .tag_field > textarea:hover,
.wow_sett_content .tag_field > select:hover { background: var(--ci-surface-2) !important; }
.wow_sett_content .tag_field > input + span,
.wow_sett_content .tag_field > textarea + span,
.wow_sett_content .tag_field > select + span { color: var(--ci-text-4) !important; }
.wow_sett_content .btn-main {
  background: var(--ci-green) !important; color: var(--ci-on-green) !important;
  box-shadow: var(--ci-shadow-cta) !important; border-radius: var(--ci-r-pill) !important;
}
.wow_sett_content .btn-main:hover { background: var(--ci-green-hover) !important; }
.wow_sett_content .btn-default { background: var(--ci-surface-2) !important; color: var(--ci-text-2) !important; }

/* =========================================================
   Messages -- full page (messages/content.phtml + partials).
   Real classes confirmed by reading the templates directly, not
   guessed: .tag_messages is the page root, .tag_msg_user_list is the
   left conversation list, .tag_msg_user_chat/.tag_msg_right_prt is
   the open thread, .messages-container is the real scrollable message
   history, .tag_msg_write/.tag_write_msg is the real compose box.
   Conversation rows reuse .notification-list (same family Phase 2
   already themed for the header's dropdowns), so most of the visual
   language here is inherited rather than re-declared.
   ========================================================= */
.tag_messages { background: var(--ci-ink) !important; }
.tag_messages .wow_content { background: var(--ci-surface) !important; border: 1px solid var(--ci-line) !important; box-shadow: none !important; }
.tag_msg_user_list, .tag_msg_user_chat { background: var(--ci-surface) !important; }
.tag_msg_header { border-bottom: 1px solid var(--ci-line) !important; }
.tag_msg_user_list .notification-list.messages-list { border-bottom: 1px solid var(--ci-line-soft) !important; }
.tag_msg_user_list .notification-list.messages-list:hover { background: var(--ci-surface-2) !important; }
.tag_msg_user_list .notification-list.messages-list.active { background: var(--ci-green-soft) !important; }
.tag_msg_user_list .notification-text .truncate { color: var(--ci-bone) !important; }
.tag_msg_user_list .header-message, .tag_msg_user_list .ajax-time { color: var(--ci-text-4) !important; }
.messages-container { background: var(--ci-ink) !important; }
.chat-messages-wrapper .incoming .messages-wrapper { background: var(--ci-surface-2) !important; color: var(--ci-bone) !important; }
.chat-messages-wrapper .outgoing .messages-wrapper { background: var(--ci-green) !important; color: var(--ci-on-green) !important; }
.tag_msg_write { background: var(--ci-surface) !important; border-top: 1px solid var(--ci-line) !important; }
.tag_write_msg textarea, .tag_write_msg input { background: var(--ci-surface-2) !important; color: var(--ci-bone) !important; }