/* Quang Chau Chat theme — inherits /opt/quangchau-design-system/DESIGN.md */
:root{
  --background-color:244 246 251;
  --surface-1:255 255 255;
  --surface-2:248 250 252;
  --surface-active:255 240 242;
  --border-container:231 233 238;
  --border-strong:217 221 227;
  --border-weak:231 233 238;

  /* Chatwoot's brand token is remapped to QC red. */
  --blue-9:201 20 36;
  --blue-10:168 15 30;
  --blue-11:168 15 30;
  --blue-12:116 14 26;
  --border-blue:201,20,36,.38;
}

html,body,.qc-app{
  font-family:var(--qc-font)!important;
  background:var(--qc-bg)!important;
  color:var(--qc-text)!important;
}
.qc-app button,.qc-app input,.qc-app select,.qc-app textarea{
  font-family:var(--qc-font)!important;
}
.qc-app ::selection{background:var(--qc-red-100);color:var(--qc-red-700)}
.qc-app :where(table){font-variant-numeric:tabular-nums}
.qc-app :where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--qc-red-600)!important;
  outline-offset:2px;
}

/* ===== QC shell: sidebar ===== */
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0{
  background:var(--qc-shell-red)!important;
  border-right:0!important;
  color:#fff!important;
  box-shadow:none!important;
  padding-right:0!important;
  overflow:visible!important;
}
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 > section:first-of-type{
  padding-right:8px;
}
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 nav{
  padding-left:8px!important;
  padding-right:0!important;
  overflow-x:visible!important;
}
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 nav > ul{
  gap:2px!important;
}

/* All sidebar text/icons inherit white unless selected. */
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 :where(a,button,[role="button"],span,svg,[class*="text-n-slate-"]){
  color:rgba(255,255,255,.94)!important;
}
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 :where([class*="bg-n-strong"],[class*="border-n-weak"]){
  border-color:rgba(255,255,255,.18)!important;
}
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 .bg-n-strong{
  background:rgba(255,255,255,.24)!important;
}
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 :where(a,button,[role="button"]):hover{
  background:rgba(255,255,255,.10)!important;
}
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 :where(.bg-n-button-color){
  background:rgba(255,255,255,.09)!important;
  outline-color:rgba(255,255,255,.18)!important;
}

/* Active sidebar item: exact Quang Chau joined-surface treatment. */
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 nav a.bg-n-alpha-2,
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 nav a.active{
  position:relative!important;
  overflow:visible!important;
  margin-right:0!important;
  background:var(--qc-bg)!important;
  color:var(--qc-red-700)!important;
  border-radius:25px 0 0 25px!important;
  box-shadow:none!important;
}
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 nav a.bg-n-alpha-2 :where(span,svg),
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 nav a.active :where(span,svg){
  color:var(--qc-red-700)!important;
}
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 nav a.bg-n-alpha-2::before,
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 nav a.bg-n-alpha-2::after,
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 nav a.active::before,
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 nav a.active::after{
  content:"";
  position:absolute;
  right:0;
  width:25px;
  height:25px;
  pointer-events:none;
  z-index:0;
}
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 nav a.bg-n-alpha-2::before,
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 nav a.active::before{
  top:-25px;
  background:radial-gradient(circle at 0 0,transparent 24.5px,var(--qc-bg) 25px);
}
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 nav a.bg-n-alpha-2::after,
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 nav a.active::after{
  bottom:-25px;
  background:radial-gradient(circle at 0 100%,transparent 24.5px,var(--qc-bg) 25px);
}

/* Child tree lines inside red sidebar. */
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 nav li::before,
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 nav li::after{
  border-color:rgba(255,255,255,.28)!important;
}
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 nav li[class*="before:bg-n-slate-"]::before{
  background:rgba(255,255,255,.25)!important;
}

/* Sidebar footer gradient must follow red shell, not white. */
.qc-app aside.bg-n-background.flex.flex-col.fixed.top-0 > section:last-of-type > div[class*="bg-gradient-to-t"]{
  background:linear-gradient(to top,var(--qc-shell-red),rgba(167,25,25,0))!important;
}

/* ===== Main work area ===== */
.qc-app main{
  background:var(--qc-bg)!important;
}
.qc-app .bg-n-background{background-color:var(--qc-bg)!important}
.qc-app .bg-n-surface-1{background-color:var(--qc-surface)!important}
.qc-app .bg-n-surface-2{background-color:var(--qc-surface-2)!important}
.qc-app :where(.border-n-weak,.border-n-container){border-color:var(--qc-line)!important}
.qc-app :where(.outline-n-weak){outline-color:var(--qc-line)!important}
.qc-app :where(.rounded-lg,.rounded-xl){border-radius:var(--qc-r-lg)!important}

/* Inputs and controls */
.qc-app :where(input,textarea,select){
  border-radius:var(--qc-r-sm)!important;
  border-color:var(--qc-line-strong)!important;
}
.qc-app :where(input,textarea,select):focus{
  border-color:var(--qc-red-600)!important;
  box-shadow:var(--qc-ring)!important;
}
.qc-app :where(button,[role="button"]){
  transition:
    background var(--qc-dur-fast) var(--qc-ease),
    color var(--qc-dur-fast) var(--qc-ease),
    border-color var(--qc-dur-fast) var(--qc-ease),
    transform var(--qc-dur-fast) var(--qc-ease)!important;
}
.qc-app :where(button,[role="button"]):active{transform:translateY(1px)}

/* Remap primary/brand actions to QC red. */
.qc-app :where(.bg-n-brand,.bg-n-blue-9,.bg-n-blue-10){
  background-color:var(--qc-red-600)!important;
}
.qc-app :where(.text-n-brand,.text-n-blue-11,.text-n-blue-12){
  color:var(--qc-red-700)!important;
}
.qc-app :where(.hover\:bg-n-blue-10:hover){
  background-color:var(--qc-red-700)!important;
}

/* Conversation surfaces: restrained hierarchy, no heavy card effects. */
.qc-app [class*="conversation"] [class*="shadow"],
.qc-app [class*="inbox"] [class*="shadow"]{
  box-shadow:none!important;
}
.qc-app [class*="conversation"] [class*="border"],
.qc-app [class*="inbox"] [class*="border"]{
  border-color:var(--qc-line)!important;
}
.qc-app [class*="message"] [class*="rounded"]{
  border-radius:var(--qc-r-lg)!important;
}
.qc-app [class*="composer"]{
  background:var(--qc-surface)!important;
  border-color:var(--qc-line)!important;
}

/* Mobile/tablet */
@media(max-width:1023px){
  .qc-app aside.bg-n-background.flex.flex-col.fixed.top-0{
    box-shadow:var(--qc-shadow-md)!important;
  }
}
@media(max-width:760px){
  .qc-app aside.bg-n-background.flex.flex-col.fixed.top-0{
    width:min(86vw,320px)!important;
  }
  .qc-app :where(button,a,[role="button"]){min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  .qc-app *,.qc-app *::before,.qc-app *::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
  }
}

/* Fallback auth page: generally not shown because Workspace owns sign-in. */
.qc-auth{
  font-family:var(--qc-font);
  background:var(--qc-bg);
  color:var(--qc-text);
}
.qc-auth main{background:var(--qc-bg)!important}
.qc-auth section.bg-white{
  border:1px solid var(--qc-line)!important;
  border-radius:var(--qc-r-lg)!important;
  box-shadow:var(--qc-shadow-md)!important;
}
.qc-auth h2{color:var(--qc-text)!important;font-weight:700!important}
.qc-auth label{color:var(--qc-text-2)!important}
.qc-auth input{font-family:var(--qc-font)!important;border-radius:var(--qc-r-sm)!important}
.qc-auth button[type="submit"]{
  background:var(--qc-red-600)!important;
  border-radius:var(--qc-r-sm)!important;
  box-shadow:none!important;
}
.qc-auth button[type="submit"]:hover{background:var(--qc-red-700)!important}
.qc-auth input:focus{box-shadow:var(--qc-ring)!important}