/* BEANCORD -> Discord look.
   Loaded AFTER styles.css and tailwind.css, so it overrides the chunky "raised button" skin.
   - Default theme: Discord's real colours.  Other themes keep their own colours but get the flat Discord shapes.
   To undo all of this, remove the <link rel="stylesheet" href="discord.css"> line from index.html. */

:root{--dc-font:'gg sans','Noto Sans','Helvetica Neue',Helvetica,Arial,sans-serif}
html body,html body input,html body button,html body select,html body textarea{font-family:var(--dc-font)}

/* ---------- Discord's real colours (default theme only) ---------- */
html[data-theme="default"][data-theme] [class~="bg-[#313338]"]{background-color:#313338 !important}
html[data-theme="default"][data-theme] [class~="bg-[#2b2d31]"]{background-color:#2b2d31 !important}
html[data-theme="default"][data-theme] [class~="bg-[#1e1f22]"]{background-color:#1e1f22 !important}
html[data-theme="default"][data-theme] [class~="bg-[#232428]"]{background-color:#232428 !important}
html[data-theme="default"][data-theme] [class~="bg-[#383a40]"]{background-color:#383a40 !important}
html[data-theme="default"][data-theme] [class~="bg-[#35373c]"],html[data-theme="default"][data-theme] [class~="hover:bg-[#35373c]"]:hover{background-color:#35373c !important}
html[data-theme="default"][data-theme] [class~="bg-[#404249]"],html[data-theme="default"][data-theme] [class~="hover:bg-[#404249]"]:hover{background-color:#404249 !important}
html[data-theme="default"][data-theme] [class~="bg-[#111214]"]{background-color:#111214 !important}

/* ---------- headers: plain bold text with Discord's soft shadow line ---------- */
html body #sh,html body #ch,html body #shop h2,html body #rm h2,
html body .bc-h,html body #bc_sheet h3,html body #bc_settings h2{
  font-family:var(--dc-font);letter-spacing:0;font-weight:600;color:#f2f3f5}
html body #sh,html body #ch{
  font-size:16px;border-bottom:0 !important;
  box-shadow:0 1px 0 rgba(4,4,5,.2),0 1.5px 0 rgba(6,6,7,.05),0 2px 0 rgba(4,4,5,.05)}
html body #leftcol>div:first-child,html body #leftcol>div:nth-child(2),html body #mem{border:0 !important}
html body #mem{box-shadow:none}

/* ---------- buttons: flat, 3px corners, no raised edge ---------- */
html[data-theme] body #app [class~="bg-[#5865f2]"]:is(button),
html[data-theme] body #shop [class~="bg-[#5865f2]"]:is(button),
html[data-theme] body #rm [class~="bg-[#5865f2]"]:is(button),
html[data-theme] body #app [class~="bg-[#23a55a]"]:is(button),
html[data-theme] body #shop [class~="bg-[#23a55a]"]:is(button),
html[data-theme] body #rm [class~="bg-[#23a55a]"]:is(button){
  border:0 !important;box-shadow:none !important;border-radius:3px;color:#fff;font-weight:500;transform:none;transition:background-color .17s ease,border-radius .15s}
html[data-theme] body #app [class~="bg-[#5865f2]"]:is(button):active,
html[data-theme] body #app [class~="bg-[#23a55a]"]:is(button):active{transform:none !important;box-shadow:none !important}
html[data-theme] body #app [class~="bg-[#5865f2]"]:is(button):hover,
html[data-theme] body #app [class~="bg-[#23a55a]"]:is(button):hover,html body #shop button:hover{filter:none}
html[data-theme="default"] body #app [class~="bg-[#5865f2]"]:is(button),
html[data-theme="default"] body #shop [class~="bg-[#5865f2]"]:is(button),
html[data-theme="default"] body #rm [class~="bg-[#5865f2]"]:is(button){background:#5865f2 !important}
html[data-theme="default"] body #app [class~="bg-[#5865f2]"]:is(button):hover,
html[data-theme="default"] body #shop [class~="bg-[#5865f2]"]:is(button):hover,
html[data-theme="default"] body #rm [class~="bg-[#5865f2]"]:is(button):hover{background:#4752c4 !important}
html[data-theme="default"] body #app [class~="bg-[#23a55a]"]:is(button),
html[data-theme="default"] body #shop [class~="bg-[#23a55a]"]:is(button),
html[data-theme="default"] body #rm [class~="bg-[#23a55a]"]:is(button){background:#248046 !important}
html[data-theme="default"] body #app [class~="bg-[#23a55a]"]:is(button):hover,
html[data-theme="default"] body #shop [class~="bg-[#23a55a]"]:is(button):hover,
html[data-theme="default"] body #rm [class~="bg-[#23a55a]"]:is(button):hover{background:#1a6334 !important}

/* ---------- server rail: round icons that turn into rounded squares ---------- */
html body #leftcol>div:first-child button{border-radius:50%;transition:border-radius .15s ease,background-color .15s ease}
html body #leftcol>div:first-child button:hover{border-radius:16px}
html body #srv button{border-radius:50%}
html body #srv button:hover{border-radius:16px}
html body #leftcol>div:first-child [class~="rounded-xl"]{border-radius:16px}

/* ---------- channel list ---------- */
html body #sc button{border-radius:4px;font-weight:500}

/* ---------- messages: full-width rows, light hover ---------- */
html body #msgs>div{border-radius:0;margin:0 -16px;padding:2px 16px;transition:none}
html body #msgs>div:hover{background:rgba(2,2,2,.06)}
html body #msgs>div.forum-wrap{margin:0;padding:0}
html body #msgs>div.forum-wrap:hover{background:none}
html[data-mode="light"] body #msgs>div:hover{background:rgba(6,6,7,.03)}

/* ---------- message box: one big rounded field ---------- */
html body #f{padding:0 16px 24px}
html body #f #i{background:#383a40;border:0 !important;border-radius:8px;padding:11px 16px;box-shadow:none !important;color:#dbdee1}
html body #f #i:focus{border:0 !important;box-shadow:none !important}
html body #f button[type=button]{background:#383a40;border:0;border-radius:8px}
html body #f button[type=button]:hover{background:#404249}
html body #f button[type=submit]{border-radius:8px}
html body #sq,html body #shop input,html body #rm input[type=text],html body #rm select{border:0 !important;border-radius:4px;background:#1e1f22}
html body #sq:focus{box-shadow:none !important}

/* ---------- windows, menus and prompts ---------- */
html body #vpc,html body #pm>div,html body #rm>div,html body .bc-modal{
  border:0 !important;border-radius:8px;box-shadow:0 0 0 1px rgba(30,31,34,.6),0 8px 16px rgba(0,0,0,.24)}
html body #ctx{border:0 !important;border-radius:4px;box-shadow:0 0 0 1px rgba(30,31,34,.6),0 8px 16px rgba(0,0,0,.24);background:#111214}
html body .tile-big{border:0;border-radius:8px}
html body .bc-modal input,html body .bc-modal select,html body .bc-modal textarea,
html body #bc_sheet input,html body #bc_sheet select,html body #bc_sheet textarea,
html body #bc_settings input[type=text],html body #bc_settings select{
  border:0 !important;border-radius:3px;background:#1e1f22;box-shadow:none !important}
html body .bc-modal input:focus,html body #bc_sheet input:focus,html body #bc_settings input:focus{box-shadow:0 0 0 1px #5865f2 !important}

/* ---------- login screen ---------- */
html body #auth{background:#5865f2 linear-gradient(135deg,#5865f2 0%,#404eed 100%)}
html body #auth .art{stroke:#fff;stroke-opacity:.12}
html body #auth .card{max-width:480px;padding:32px;border:0;border-radius:5px;background:#313338;box-shadow:0 2px 10px rgba(0,0,0,.2)}
html body #auth .logo{font-family:var(--dc-font);font-size:24px;font-weight:600;letter-spacing:0;color:#f2f3f5;margin:0 0 20px}
html body #auth .field{height:40px;padding:10px;margin-bottom:16px;border:0;border-radius:3px;background:#1e1f22;color:#dbdee1;font-size:16px}
html body #auth .field:focus{border:0;box-shadow:0 0 0 1px #5865f2}
html body #auth #err{min-height:24px;padding:0 0 8px;color:#f23f43}
html body #auth .btn{height:44px;padding:2px 16px;border-radius:3px;font-size:16px;font-weight:500;margin-bottom:8px;transition:background-color .17s ease;box-shadow:none}
html body #auth .btn:hover{filter:none}
html body #auth .btn:active{transform:none}
html body #auth .btn-in{background:#5865f2;border:0;color:#fff;box-shadow:none}
html body #auth .btn-in:hover{background:#4752c4}
html body #auth .btn-up{background:transparent;border:0;color:#00a8fc;box-shadow:none;height:36px}
html body #auth .btn-up:hover{background:transparent;text-decoration:underline}

/* ---------- small pieces ---------- */
html body #bc_settings input[type=range]{accent-color:#5865f2}
html body .pbtn{border-radius:3px}
::-webkit-scrollbar{width:16px;height:16px}
::-webkit-scrollbar-thumb{background:#1a1b1e;border:4px solid #2b2d31;border-radius:8px;background-clip:padding-box}
::-webkit-scrollbar-track{background:#2b2d31;border:4px solid #2b2d31;background-clip:padding-box}
html[data-theme="default"] #msgs::-webkit-scrollbar-thumb{border-color:#313338}
html[data-theme="default"] #msgs::-webkit-scrollbar-track{background:#2b2d31;border-color:#2b2d31}

/* typing indicator sits under the message box, like Discord */
html body #typing{font-style:normal;font-size:12px;font-weight:600;color:#dbdee1;padding:0 20px}
html body #f{padding-bottom:28px}
@media (max-width:767px){html body #f{padding:0 10px calc(26px + env(safe-area-inset-bottom))}}

/* settings: long ids wrap instead of stretching the card */
html body #st_body code,html body #st_body .font-mono{word-break:break-all}