:root{--body-color: #c5cadf;--body-color-muted: #b6b8c0;--border-color: #2b2c33;--body-bg-color: #202126;--body-bg-color-light: #292a30;--button-color: #2980b9;--button-color-muted: #a8acc2;--button-text-color-hover: #fff;--overlay-bg-color: rgba(0, 0, 0, 0.5);--link-color: #00a8fc;--window-bg-color: #202126;--window-heading-color: #6c797a;--placeholder-color: #3d3d3d;--date-marker-color: var(--button-color);--unread-marker-color: var(--button-color);--highlight-bg-color: #2d2e36;--highlight-border-color: var(--button-color);--upload-progressbar-color: var(--button-color)}::-webkit-scrollbar:hover{background-color:var(--body-bg-color-light)}::-webkit-scrollbar-thumb:vertical{background-color:var(--border-color);border-radius:0}::-webkit-scrollbar-thumb:vertical:active{background-color:#444}body,.input{background:var(--body-bg-color)}.input{border:1px solid var(--border-color);color:var(--body-color)}a:visited{color:#9b59b6}.logo-container{display:none}.channel-list-item[data-type=lobby]{color:var(--button-color)}.channel-list-item[data-type=lobby]:hover,.channel-list-item[data-type=lobby].active{color:var(--button-color-muted)}.btn:active,.btn:focus,.input:focus{outline:0;box-shadow:0 0 0 1px rgba(41,128,185,.5)}.input:not(:disabled):focus,.input:not(:disabled):hover{border-color:var(--button-color)}#chat button.mentions,#chat button.menu,#viewport .lt,#viewport .rt,.topic-container .save-topic span,.password-container .reveal-password span,#form #submit,#form #upload{color:var(--body-color-muted)}form.message-search input{color:inherit}form.message-search input::placeholder{color:var(--body-color-muted)}#form{color:var(--body-color);background:var(--window-bg-color)}#form::before{position:absolute;top:0;left:0;bottom:0;right:0;content:" ";z-index:1;border-radius:10px;background:#161719}#form #input{margin:0;padding:0px 10px}#form *{z-index:1}#form{border-top:0;padding:10px;margin:0 10px 10px 10px}.jump-to-input .input{color:var(--body-color)}::placeholder{color:var(--body-color-muted)}#chat .header{border-bottom:1px solid var(--border-color)}#chat .userlist,#chat .content{border-left:1px solid var(--border-color)}#chat .userlist .count{background:inherit}#chat .from .user{font-weight:600;font-weight:500}#chat .self .content{color:var(--body-color)}span.content .user{color:#c9cdfb !important;background:rgba(88,101,242,.2980392157);border-radius:3px;padding:0 2px}#chat .msg[data-type=monospace_block] .text,#chat .toggle-content,#form #nick{background:var(--body-bg-color-light);color:var(--body-color)}#footer button:hover,#footer button.active,.channel-list-item:hover{background-color:var(--body-bg-color-light);color:var(--body-color)}#footer button{color:inherit}#footer button.active,.channel-list-item.active{background-color:var(--body-bg-color-light);color:var(--body-color)}#sidebar{color:var(--body-color-muted)}.channel-list-item .badge{background:var(--border-color);color:var(--body-color)}.channel-list-item .badge.highlight{background:var(--body-color);color:var(--border-color)}#chat .msg[data-type=invite] .from:before,#chat .msg[data-type=topic] .from::before,#chat .msg[data-type=mode] .from::before,#chat .msg[data-type=mode_channel] .from::before,#chat .msg[data-type=whois] .from:before,#chat .msg[data-type=nick] .from:before,#chat .msg[data-type=join] .from:before,#chat .msg.self[data-type=raw] .from:before{color:var(--button-color)}code,.irc-monospace{background-color:var(--border-color)}pre{background-color:#f5f5f5}#context-menu{background:var(--body-bg-color);border:1px solid var(--border-color)}.context-menu-item{color:var(--body-color-muted)}.context-menu-item:hover{background:var(--body-bg-color-light);color:var(--body-color)}#chat.colored-nicks .user.color-1{color:#f7adf7}#chat.colored-nicks .user.color-2{color:#abf99f}#chat.colored-nicks .user.color-3{color:#86efdc}#chat.colored-nicks .user.color-4{color:#b76ee5}#chat.colored-nicks .user.color-5{color:#f9a4b3}#chat.colored-nicks .user.color-6{color:#f7999a}#chat.colored-nicks .user.color-7{color:#f497b9}#chat.colored-nicks .user.color-8{color:#f9a9d7}#chat.colored-nicks .user.color-9{color:#7fa2e2}#chat.colored-nicks .user.color-10{color:#a8b8ff}#chat.colored-nicks .user.color-11{color:#ad88fc}#chat.colored-nicks .user.color-12{color:#f4aead}#chat.colored-nicks .user.color-13{color:#fc71ab}#chat.colored-nicks .user.color-14{color:#ff72e0}#chat.colored-nicks .user.color-15{color:#8cb6ea}#chat.colored-nicks .user.color-16{color:#f9857c}#chat.colored-nicks .user.color-17{color:#ed9b82}#chat.colored-nicks .user.color-18{color:#8df484}#chat.colored-nicks .user.color-19{color:#ffcce3}#chat.colored-nicks .user.color-20{color:#efcc81}#chat.colored-nicks .user.color-21{color:#90a1ed}#chat.colored-nicks .user.color-22{color:#f4d484}#chat.colored-nicks .user.color-23{color:#97ea70}#chat.colored-nicks .user.color-24{color:#fcbbba}#chat.colored-nicks .user.color-25{color:#eef975}#chat.colored-nicks .user.color-26{color:#c7ff93}#chat.colored-nicks .user.color-27{color:#ffade1}#chat.colored-nicks .user.color-28{color:#98ecf2}#chat.colored-nicks .user.color-29{color:#7187f2}#chat.colored-nicks .user.color-30{color:#9676e2}#chat.colored-nicks .user.color-31{color:#f2a4eb}#chat.colored-nicks .user.color-32{color:#85f27d}.irc-fg2{color:#0074d9}.irc-fg5{color:#e969a7}.irc-fg12{color:#50a8ff}.mentions-popup,#context-menu,.textcomplete-menu{background-color:rgba(0,0,0,.9);border:1px solid rgba(255,255,255,.1)}.context-menu-item,.textcomplete-item a{color:var(--body-color)}.context-menu-item.active,.textcomplete-item:focus,.textcomplete-item:hover,.textcomplete-menu .active,#chat .userlist .user.active{background-color:rgba(255,255,255,.1)}#form #input::placeholder{color:var(--placeholder-color)}.textcomplete-menu{background:#18191c;opacity:1}.textcomplete-menu li{color:var(--body-color)}body #chat .toggle-content .thumb{max-width:300px}#chat .toggle-content img{max-height:300px}#chat .chat-view[data-type=channel] .msg.highlight .time{color:#c5cadf}@media(max-width: 680px){#chat.time-12h .time,#chat.time-seconds .time{font-size:.77em}#form::before{border-radius:80px}}@media(min-width: 480px){#chat .from{width:90px}#sidebar{width:180px}#chat.time-12h .time,#chat.time-seconds .time{width:60px;font-size:.77em}#form::before{background:#18181c}#form #input::placeholder{color:#373844}}@media(max-width: 479px){#chat .msg{display:block;padding:3.6px 10px}}@media(max-width: 768px){#context-menu,#help .help-item,#loading,#settings .error,#sidebar .empty,.channel-list-item,.header .topic,.messages .msg,.textcomplete-menu,.window label{font-size:.95em}}.channel-list-item .close-tooltip{display:none}#chat video{max-height:300px}

/* osito locked profile fields */
#connect .connect-row:has(#connect\:username),
#connect .connect-row:has(#connect\:realname),
#connect .connect-row:has(#connect\:leaveMessage),
#connect .connect-row:has(#connect\:join),
#connect .connect-row:has(#connect\:channels),
#connect .connect-row:has(input[type="checkbox"]) {
  display: none !important;
}

/* osito frost theme */
:root{
  --body-color:#eef3ff;
  --body-color-muted:#c8d0da;
  --border-color:var(--osito-ui-border, rgba(255,255,255,.12));
  --body-bg-color:transparent;
  --body-bg-color-light:rgba(255,255,255,.032);
  --button-color:var(--osito-ui-accent, #78ff78);
  --button-color-muted:color-mix(in oklab, var(--osito-ui-accent, #78ff78), white 44%);
  --button-text-color-hover:#0a120d;
  --overlay-bg-color:rgba(0,0,0,.2);
  --link-color:var(--osito-ui-accent, #78ff78);
  --window-bg-color:transparent;
  --window-heading-color:#eef3ff;
  --placeholder-color:rgba(238,243,255,.42);
  --date-marker-color:color-mix(in oklab, var(--osito-ui-accent, #78ff78), transparent 55%);
  --unread-marker-color:color-mix(in oklab, var(--osito-ui-accent, #78ff78), transparent 45%);
  --highlight-bg-color:rgba(255,255,255,.08);
  --highlight-border-color:color-mix(in oklab, var(--osito-ui-accent, #78ff78), transparent 65%);
  --upload-progressbar-color:var(--osito-ui-accent, #78ff78)
}

html,
body,
*,
*::before,
*::after,
*:hover,
*:active,
*:focus,
*:focus-visible,
*:focus-within,
a,
a:hover,
a:active,
button,
button:hover,
button:active,
input,
input:hover,
input:active,
textarea,
select,
label,
summary,
[role="button"],
[draggable],
[contenteditable]{
  cursor:url("/Teddy%20Bear.cur"), auto !important;
}

body,
#app,
#viewport,
#chat,
#chat-container,
#chat .chat-view,
#chat .messages,
#loading,
#loading .window,
#connect,
#connect .container,
#sign-in .container,
.window,
.mentions-popup,
#context-menu,
.textcomplete-menu{
  background:transparent !important;
}

body{
  background:transparent !important;
}

#viewport,
#chat .content,
#sidebar,
#chat .header,
#form,
#chat .userlist,
#loading .window,
#connect .container,
#sign-in .container,
.mentions-popup,
#context-menu,
.textcomplete-menu,
.window{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

#sidebar,
#chat .content,
#chat .header,
#form,
#chat .userlist,
#loading .window,
#connect .container,
#sign-in .container,
.mentions-popup,
#context-menu,
.textcomplete-menu,
.window{
  background:color-mix(in oklab, var(--osito-ui-frost, rgba(12,16,24,.14)), transparent 90%) !important;
  border:1px solid color-mix(in oklab, var(--osito-ui-border, rgba(255,255,255,.12)), transparent 18%) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.03),0 0 14px color-mix(in oklab, var(--osito-ui-glow, rgba(120,255,120,.55)), transparent 92%) !important;
}

#chat .header,
#form,
#chat .userlist,
#loading .window,
#connect .container,
#sign-in .container,
.mentions-popup,
#context-menu,
.textcomplete-menu,
.window{
  border-radius:16px !important;
}

#connect{
  align-items:flex-start !important;
  justify-content:flex-start !important;
  padding:0 !important;
}

#connect > .header{
  display:none !important;
}

#connect .container,
#sign-in .container{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:14px !important;
  border-radius:18px !important;
}

#connect.window,
#sign-in.window{
  margin:0 !important;
  padding:0 !important;
  background:color-mix(in oklab, var(--osito-ui-frost, rgba(12,16,24,.14)), transparent 92%) !important;
  border:1px solid color-mix(in oklab, var(--osito-ui-border, rgba(255,255,255,.12)), transparent 20%) !important;
  border-radius:18px !important;
  box-shadow:0 8px 20px rgba(0,0,0,.03),0 0 16px color-mix(in oklab, var(--osito-ui-glow, rgba(120,255,120,.55)), transparent 92%) !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

#connect .container,
#sign-in .container,
#loading .window{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#chat .messages{
  background:transparent !important;
}

#form::before{
  background:rgba(255,255,255,.028) !important;
  border:1px solid color-mix(in oklab, var(--osito-ui-border, rgba(255,255,255,.12)), transparent 14%);
  border-radius:14px !important;
}

#connect h1,
#sign-in h1{
  margin:0 0 14px !important;
  color:#d4ffd6 !important;
  text-shadow:-1px 0 rgba(255,0,0,.84),1px 0 rgba(0,160,255,.84),0 0 16px rgba(120,255,120,.52);
  text-align:center !important;
}

#connect h2,
#sign-in h2{
  margin:0 0 12px !important;
  color:#d4ffd6 !important;
  text-shadow:-1px 0 rgba(255,0,0,.84),1px 0 rgba(0,160,255,.84),0 0 15px rgba(120,255,120,.44);
}

#connect .title,
#sign-in .title,
#connect h1 .title,
#sign-in h1 .title,
#connect label,
#sign-in label,
#connect .extra-help,
#sign-in .extra-help,
#connect .window label,
#sign-in .window label,
#connect .header .topic,
#sign-in .header .topic,
#connect .connect-sasl-external,
#connect .opt,
#connect .opt label{
  color:#d4ffd6 !important;
  text-shadow:-1px 0 rgba(255,0,0,.78),1px 0 rgba(0,160,255,.78),0 0 14px rgba(120,255,120,.4);
}

/* Prevent mobile browsers from zooming the page when IRC inputs focus. */
#connect .input,
#sign-in .input,
#connect input,
#sign-in input,
#form #nick,
#form #input,
.osito-giphy-search{
  font-size:16px !important;
}

.input,
#form #nick,
#form,
#form #input,
#chat .msg[data-type=monospace_block] .text,
#chat .toggle-content,
form.message-search .input-wrapper,
form.message-search input{
  background:color-mix(in oklab, var(--osito-ui-frost, rgba(12,16,24,.14)), transparent 92%) !important;
  border-color:color-mix(in oklab, var(--osito-ui-border, rgba(255,255,255,.12)), transparent 18%) !important;
  color:var(--body-color) !important;
}

#chat,
#viewport,
#chat-container,
#chat .chat-view,
#chat .content,
#chat .messages{
  background-color:transparent !important;
}

#form{
  margin:0 !important;
  padding:8px 10px 10px 10px !important;
  border-top:0 !important;
  border-radius:14px 14px 0 0 !important;
  background:color-mix(in oklab, var(--osito-ui-frost, rgba(12,16,24,.14)), transparent 90%) !important;
  position:relative !important;
}

#chat .header .topic,
.channel-list-item,
#footer button,
.context-menu-item,
.textcomplete-item a{
  color:var(--body-color-muted) !important;
}

#footer button:hover,
#footer button.active,
.channel-list-item:hover,
.channel-list-item.active,
.context-menu-item.active,
.textcomplete-item:focus,
.textcomplete-item:hover,
.textcomplete-menu .active,
#chat .userlist .user.active{
  background:rgba(255,255,255,.08) !important;
  color:var(--body-color) !important;
}

#chat button.mentions,
#chat button.menu,
#viewport .lt,
#viewport .rt,
.topic-container .save-topic span,
.password-container .reveal-password span,
#form #submit,
#form #upload{
  color:var(--button-color) !important;
}

#form #submit[disabled],
#form #upload[disabled]{
  color:var(--body-color-muted) !important;
  opacity:.5 !important;
}

.channel-list-item[data-type=lobby],
.channel-name,
a,
.link,
.special,
.channel,
.user{
  color:#d4ffd6 !important;
}

::selection{
  background:rgba(120,255,120,.22);
}

/* widget/embed cleanup
   Keep The Lounge's native navigation controls visible in the homepage iframe.
   The iframe is narrow enough to use TL's mobile/off-canvas layout, so hiding
   these controls makes channels, server windows, PMs, and the nick list unreachable. */
#chat button.menu,
.channel-list-item .close-tooltip,
.channel-list-item .close{
  display:none !important;
}

#chat .header .title{
  padding-left:12px !important;
}

#upload-progressbar,
#upload-tooltip{
  display:none !important;
}

#osito-giphy-trigger{
  appearance:none;
  border:0;
  outline:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:34px;
  padding:0 8px;
  border-radius:8px;
  background:transparent;
  color:var(--button-color) !important;
  font:600 12px/1 "Lucida Console","Courier New",monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  user-select:none;
  transition:opacity .2s,transform .08s ease,color .15s ease;
}

#osito-giphy-trigger:hover,
#osito-giphy-trigger:focus-visible,
#osito-giphy-trigger.is-open{
  background:transparent;
  box-shadow:none;
  opacity:.6;
}

#osito-giphy-trigger:active{
  transform:scale(.97);
}

#osito-giphy-popover{
  position:absolute;
  right:58px;
  bottom:calc(100% + 10px);
  width:min(420px, calc(100vw - 48px));
  height:340px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border-radius:16px;
  background:color-mix(in oklab, var(--osito-ui-frost, rgba(12,16,24,.14)), black 26%) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 18px 36px rgba(0,0,0,.34),0 0 22px color-mix(in oklab, var(--osito-ui-glow, rgba(120,255,120,.55)), transparent 84%);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  z-index:50;
}

#osito-giphy-popover[hidden]{
  display:none !important;
}

.osito-giphy-search{
  width:100%;
  box-sizing:border-box;
  min-height:38px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.06) !important;
  border:1px solid color-mix(in oklab, var(--osito-ui-border, rgba(255,255,255,.12)), transparent 12%) !important;
  color:var(--body-color) !important;
}

.osito-giphy-results{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.osito-giphy-result{
  appearance:none;
  border:1px solid color-mix(in oklab, var(--osito-ui-border, rgba(255,255,255,.12)), transparent 10%);
  border-radius:12px;
  padding:0;
  background:rgba(10,14,18,.88);
  overflow:hidden;
  cursor:pointer;
  min-height:110px;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.osito-giphy-result:hover{
  box-shadow:0 8px 18px rgba(0,0,0,.18),0 0 18px color-mix(in oklab, var(--osito-ui-glow, rgba(120,255,120,.55)), transparent 76%);
  background:rgba(255,255,255,.07);
}

.osito-giphy-result img{
  display:block;
  width:100%;
  height:100%;
  min-height:110px;
  object-fit:cover;
  background:#101419;
  opacity:1 !important;
  filter:none !important;
}

.osito-giphy-state{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:110px;
  padding:14px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  color:var(--body-color-muted);
  text-align:center;
  font-size:.9rem;
}

.mentions-popup,
#context-menu,
.textcomplete-menu{
  background:color-mix(in oklab, var(--osito-ui-frost, rgba(12,16,24,.14)), black 26%) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 18px 36px rgba(0,0,0,.34) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}

.mentions-popup .msg .content,
.context-menu-item,
.textcomplete-item{
  background:transparent !important;
}

.context-menu-divider{
  background-color:rgba(255,255,255,.1) !important;
}

.osito-giphy-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--body-color-muted);
  font-size:.78rem;
}

.osito-giphy-powered{
  color:#fff !important;
  text-decoration:none;
  opacity:.84;
}

.osito-giphy-powered:hover{
  opacity:1;
}

@media(max-width: 680px){
  #osito-giphy-popover{
    left:10px;
    right:10px;
    width:auto;
    height:min(52vh, 340px);
  }
}

/* osito compact chat */
#chat .time,
#chat.time-12h .time,
#chat.time-seconds .time{
  display:none !important;
  width:0 !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

@media(min-width: 480px){
  #chat .from{
    width:auto !important;
    min-width:0 !important;
    max-width:96px !important;
  }
}