/* Final interaction fixes for Theme Studio v2 and Accessibility. */

/* The custom colour field is a real draggable saturation/value control. */
.rts-colour-picker{
  cursor:crosshair;
  touch-action:none;
  user-select:none;
  outline:none;
}
.rts-colour-picker:focus-visible{box-shadow:0 0 0 2px var(--accent),0 0 0 4px color-mix(in srgb,var(--accent),transparent 72%)}
.rts-colour-picker::after{
  left:var(--rts-picker-x,89%);
  top:var(--rts-picker-y,10%);
  right:auto;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

/* Discord-like range controls: solid filled track + clear draggable thumb. */
#r021-settings .rta-control-range input[type='range'],
.rift-theme-studio-panel .rts-intensity input[type='range']{
  -webkit-appearance:none;
  appearance:none;
  height:8px;
  padding:0;
  border:0;
  border-radius:999px;
  outline:0;
  background:linear-gradient(to right,var(--accent) 0 var(--rta-range-progress,50%),var(--bg-5) var(--rta-range-progress,50%) 100%);
  cursor:pointer;
}
#r021-settings .rta-control-range input[type='range']::-webkit-slider-thumb,
.rift-theme-studio-panel .rts-intensity input[type='range']::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border:3px solid var(--bg-1);
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,.42),0 0 0 1px var(--border-strong);
}
#r021-settings .rta-control-range input[type='range']::-moz-range-track,
.rift-theme-studio-panel .rts-intensity input[type='range']::-moz-range-track{
  height:8px;
  border-radius:999px;
  background:var(--bg-5);
}
#r021-settings .rta-control-range input[type='range']::-moz-range-progress,
.rift-theme-studio-panel .rts-intensity input[type='range']::-moz-range-progress{
  height:8px;
  border-radius:999px;
  background:var(--accent);
}
#r021-settings .rta-control-range input[type='range']::-moz-range-thumb,
.rift-theme-studio-panel .rts-intensity input[type='range']::-moz-range-thumb{
  width:14px;
  height:14px;
  border:3px solid var(--bg-1);
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,.42);
}
#r021-settings .rta-control-range input[type='range']:focus-visible,
.rift-theme-studio-panel .rts-intensity input[type='range']:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent),transparent 35%)}

/* Accessible switches use a semantic enabled colour rather than the user's brand accent. */
#r021-settings .rift-v2-accessibility .rta-switch.on{
  background:#23a55a!important;
  border-color:#23a55a!important;
}
#r021-settings .rift-v2-accessibility .rta-switch.on span{background:#fff!important}
#r021-settings .rift-v2-accessibility .rta-preview-switch{background:#23a55a!important}

/* Links are clean by default, underline on hover, or always when explicitly enabled. */
html:not(.rift-underline-links) :is(.message-text a,#r021-settings a,#r021-settings .rift-unified-link){
  text-decoration:none!important;
}
html:not(.rift-underline-links) :is(.message-text a,#r021-settings a,#r021-settings .rift-unified-link):hover{
  text-decoration:underline!important;
  text-underline-offset:2px;
}
html.rift-underline-links :is(.message-text a,#r021-settings a,#r021-settings .rift-unified-link){
  text-decoration:underline!important;
  text-underline-offset:2px;
}
#r021-settings .rta-a11y-preview:not(.underline) a{text-decoration:none!important}
#r021-settings .rta-a11y-preview:not(.underline) a:hover{text-decoration:underline!important;text-underline-offset:2px}
#r021-settings .rta-a11y-preview.underline a{text-decoration:underline!important;text-underline-offset:2px}

/* Multiple predictable reset points instead of one destructive all-or-nothing reset. */
#r021-settings .rift-v2-accessibility{position:relative}
#r021-settings .rta-reset-all{
  position:absolute;
  right:0;
  top:0;
  min-height:34px;
  padding:7px 12px;
  font-size:11px;
}
#r021-settings .rta-resettable{position:relative}
#r021-settings .rta-reset-button{
  position:absolute;
  right:0;
  top:20px;
  padding:4px 7px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--accent);
  font:inherit;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}
#r021-settings .rta-reset-button:hover{background:var(--accent-soft)}
#r021-settings .rta-reset-button:disabled{opacity:.45;cursor:default}

/* Compact messages follow the Discord-style single-line structure:
   author, timestamp and message all share one row; avatar is removed. */
html.rift-compact-messages #message-list>.message{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:0!important;
  padding-top:2px!important;
  padding-bottom:2px!important;
}
html.rift-compact-messages #message-list>.message>.avatar{display:none!important}
html.rift-compact-messages #message-list>.message>.message-content{
  display:grid!important;
  grid-template-columns:max-content max-content minmax(0,1fr)!important;
  column-gap:8px!important;
  row-gap:2px!important;
  align-items:baseline!important;
  min-width:0!important;
}
html.rift-compact-messages #message-list>.message .message-meta{display:contents!important}
html.rift-compact-messages #message-list>.message .message-author{
  grid-column:1!important;
  white-space:nowrap!important;
  font-size:11px!important;
}
html.rift-compact-messages #message-list>.message .message-time{
  grid-column:2!important;
  white-space:nowrap!important;
  font-size:9px!important;
}
html.rift-compact-messages #message-list>.message .message-text{
  grid-column:3!important;
  margin:0!important;
  min-width:0!important;
  line-height:1.35!important;
}
html.rift-compact-messages #message-list>.message :is(.reply-preview,.message-attachments,.reaction-strip){
  grid-column:3!important;
}

/* Match the real compact-message layout in Accessibility's preview. */
#r021-settings .rta-a11y-preview.message-compact .rta-preview-message{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px!important;
  margin-top:max(3px,calc(var(--a11y-gap) * .45))!important;
}
#r021-settings .rta-a11y-preview.message-compact .rta-preview-avatar{display:none!important}
#r021-settings .rta-a11y-preview.message-compact .rta-preview-copy{
  display:grid!important;
  grid-template-columns:max-content max-content minmax(0,1fr)!important;
  gap:0 7px!important;
  align-items:baseline!important;
}
#r021-settings .rta-a11y-preview.message-compact .rta-preview-copy>div:first-child{display:contents!important}
#r021-settings .rta-a11y-preview.message-compact .rta-preview-copy p{
  grid-column:3!important;
  margin:0!important;
  line-height:1.35!important;
}
#r021-settings .rta-a11y-preview.message-compact .rta-preview-reactions{grid-column:3!important}

/* Keep premade/custom colour layers visible on all app-owned shells while previewing.
   User/profile customisation remains intentionally excluded by theme-studio-v2.css. */
html:not([data-rift-colour-theme='none']) :is(
  body,#app,.app-shell,.server-rail,.channel-panel,.content-panel,.content-header,
  .server-header,.home-navigation,.channel-navigation,.home-view,.chat-view,.message-list,
  .composer,.typing-bar,.member-panel,.current-user-panel,.voice-view,.voice-bar,
  .r021-friends-main,.r021-friends-side,.r021-friends-shell,.r021-active-now,
  .r021-home-main,.r021-home-side,#r021-settings,.r021-settings-shell,.r021-settings-nav,.r021-settings-main
){
  background-image:var(--rfs-theme-gradient)!important;
  background-blend-mode:normal!important;
}

html[data-rift-effective-theme='light'] #r021-settings .rta-control-range input[type='range'],
html[data-rift-effective-theme='light'] .rift-theme-studio-panel .rts-intensity input[type='range']{
  background:linear-gradient(to right,var(--accent) 0 var(--rta-range-progress,50%),#c8ced6 var(--rta-range-progress,50%) 100%);
}
html[data-rift-effective-theme='light'] #r021-settings .rta-control-range input[type='range']::-webkit-slider-thumb,
html[data-rift-effective-theme='light'] .rift-theme-studio-panel .rts-intensity input[type='range']::-webkit-slider-thumb{
  border-color:#fff;
}

@media(max-width:760px){
  #r021-settings .rta-reset-all{position:static;margin:8px 0 4px}
  #r021-settings .rta-reset-button{top:18px}
  html.rift-compact-messages #message-list>.message{padding-left:12px!important;padding-right:12px!important}
}