/* ── CSS custom property defaults ─────────────────────────────
   These are overridden at runtime by theme-loader.js (FOUC prevention)
   and by MainLayout's style="@ThemeEngine.GetCssVariables()".
   ────────────────────────────────────────────────────────────── */
:root {
  --sonis-surface-base:      #1a1a2e;
  --sonis-surface-raised:    #16213e;
  --sonis-surface-overlay:   #0f3460;
  --sonis-surface-sunken:    #1f2947;
  --sonis-content-primary:   #e0e0e0;
  --sonis-content-secondary: #a0a0b0;
  --sonis-content-muted:     #606070;
  --sonis-accent-brand:      #e94560;
  --sonis-accent-secondary:  #533483;
  --sonis-accent-success:    #43b581;
  --sonis-accent-warning:    #faa61a;
  --sonis-accent-danger:     #f04747;
  --sonis-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --sonis-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* --color-* aliases kept for backward-compat with inline styles in components */
  --color-surface-base:      var(--sonis-surface-base);
  --color-surface-raised:    var(--sonis-surface-raised);
  --color-surface-overlay:   var(--sonis-surface-overlay);
  --color-surface-sunken:    var(--sonis-surface-sunken);
  --color-content-primary:   var(--sonis-content-primary);
  --color-content-secondary: var(--sonis-content-secondary);
  --color-content-muted:     var(--sonis-content-muted);
  --color-accent-brand:      var(--sonis-accent-brand);
  --color-accent-secondary:  var(--sonis-accent-secondary);
  --color-accent-success:    var(--sonis-accent-success);
  --color-accent-warning:    var(--sonis-accent-warning);
  --color-accent-danger:     var(--sonis-accent-danger);
}

/* ── Base resets ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--sonis-font-sans);
  background-color: var(--sonis-surface-base);
  color: var(--sonis-content-primary);
}

/* Override MudBlazor font so the whole app uses our theme font */
* {
  font-family: var(--sonis-font-sans);
}
code, pre {
  font-family: var(--sonis-font-mono);
}

/* Override MudBlazor dark-mode elevation: default uses rgba(255,255,255,x)
   box-shadows which appear as visible white lines. Use dark shadows instead. */
[class*="mud-elevation-"] {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}
.mud-elevation-0 {
  box-shadow: none !important;
}


input::placeholder,
textarea::placeholder {
  color: var(--sonis-content-muted);
}

/* ── Panel containers ─────────────────────────────────────────── */
.sidebar-panel,
.memberlist-panel {
  flex-shrink: 0;
  overflow: hidden;
  transition: width 200ms ease;
  height: 100%;
}

.sidebar-panel {
  width: var(--sidebar-w, 240px);
}

.memberlist-panel {
  width: var(--memberlist-w, 240px);
}

.sidebar-panel.collapsed,
.memberlist-panel.collapsed {
  width: 0 !important;
}

/* Resize handle strip */
.resize-handle-x {
  width: 4px;
  flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
  transition: background-color 150ms;
  z-index: 10;
}

.resize-handle-x:hover {
  background-color: var(--sonis-accent-brand);
}

/* Mobile backdrop (invisible on desktop) */
.panel-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 40;
}

/* ── Mobile overrides (< 768 px) ─────────────────────────────── */
@media (max-width: 767px) {
  .sidebar-panel {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(80vw, 280px) !important;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 200ms ease;
  }

  .sidebar-panel:not(.collapsed) {
    transform: translateX(0);
  }

  .memberlist-panel {
    position: fixed !important;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(80vw, 280px) !important;
    z-index: 50;
    transform: translateX(100%);
    transition: transform 200ms ease;
  }

  .memberlist-panel:not(.collapsed) {
    transform: translateX(0);
  }

  .resize-handle-x {
    display: none !important;
  }

  .panel-backdrop.active {
    display: block;
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--sonis-surface-sunken);
}

::-webkit-scrollbar-thumb {
  background: var(--sonis-content-muted);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sonis-content-secondary);
}

/* ── CSS utility classes ──────────────────────────────────────── */

/* Display */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }
.block       { display: block; }
.hidden      { display: none; }

/* Flex direction */
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }

/* Flex sizing */
.flex-1    { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.shrink-0, .flex-shrink-0 { flex-shrink: 0; }
.grow      { flex-grow: 1; }

/* Alignment */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.self-start { align-self: flex-start; }
.self-end   { align-self: flex-end; }

/* Grid */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Sizing — fluid */
.w-full   { width: 100%; }
.h-full   { height: 100%; }
.w-screen { width: 100vw; }
.h-screen { height: 100vh; }
.w-px     { width: 1px; }
.h-px     { height: 1px; }
.min-w-0  { min-width: 0; }
.min-h-0  { min-height: 0; }
.max-w-sm  { max-width: 24rem; }
.max-w-md  { max-width: 28rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-28  { max-width: 7rem; }

/* Sizing — fixed */
.w-1   { width: 0.25rem; }  .h-1   { height: 0.25rem; }
.w-2   { width: 0.5rem; }   .h-2   { height: 0.5rem; }
.w-3   { width: 0.75rem; }  .h-3   { height: 0.75rem; }
.w-3\.5 { width: 0.875rem; } .h-3\.5 { height: 0.875rem; }
.w-4   { width: 1rem; }     .h-4   { height: 1rem; }
.w-5   { width: 1.25rem; }  .h-5   { height: 1.25rem; }
.w-6   { width: 1.5rem; }   .h-6   { height: 1.5rem; }
.w-8   { width: 2rem; }     .h-8   { height: 2rem; }
.w-9   { width: 2.25rem; }  .h-9   { height: 2.25rem; }
.w-10  { width: 2.5rem; }   .h-10  { height: 2.5rem; }
.w-12  { width: 3rem; }     .h-12  { height: 3rem; }
.h-14  { height: 3.5rem; }
.h-16  { height: 4rem; }
.w-18  { width: 4.5rem; }
.w-44  { width: 11rem; }
.w-52  { width: 13rem; }
.min-w-48 { min-width: 12rem; }

/* Overflow */
.overflow-hidden  { overflow: hidden; }
.overflow-y-auto  { overflow-y: auto; }
.overflow-x-auto  { overflow-x: auto; }
.overflow-auto    { overflow: auto; }

/* Position */
.relative  { position: relative; }
.absolute  { position: absolute; }
.fixed     { position: fixed; }
.inset-0   { inset: 0; }
.top-0     { top: 0; }
.bottom-0  { bottom: 0; }
.left-0    { left: 0; }
.right-0   { right: 0; }
.bottom-full { bottom: 100%; }
.left-2    { left: 0.5rem; }

/* Z-index */
.z-10 { z-index: 10; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Padding */
.p-1     { padding: 0.25rem; }
.p-1\.5  { padding: 0.375rem; }
.p-2     { padding: 0.5rem; }
.p-3     { padding: 0.75rem; }
.p-4     { padding: 1rem; }
.p-5     { padding: 1.25rem; }
.p-6     { padding: 1.5rem; }
.p-7     { padding: 1.75rem; }
.p-8     { padding: 2rem; }
.px-2    { padding-left: 0.5rem;  padding-right: 0.5rem; }
.px-3    { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4    { padding-left: 1rem;    padding-right: 1rem; }
.px-5    { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-1    { padding-top: 0.25rem;  padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2    { padding-top: 0.5rem;   padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3    { padding-top: 0.75rem;  padding-bottom: 0.75rem; }
.py-6    { padding-top: 1.5rem;   padding-bottom: 1.5rem; }
.py-8    { padding-top: 2rem;     padding-bottom: 2rem; }
.py-12   { padding-top: 3rem;     padding-bottom: 3rem; }
.pt-0\.5 { padding-top: 0.125rem; }
.pt-1    { padding-top: 0.25rem; }
.pt-2    { padding-top: 0.5rem; }
.pt-3    { padding-top: 0.75rem; }
.pb-0\.5 { padding-bottom: 0.125rem; }
.pb-1    { padding-bottom: 0.25rem; }
.pb-4    { padding-bottom: 1rem; }
.pl-7    { padding-left: 1.75rem; }
.pl-10   { padding-left: 2.5rem; }
.pr-2    { padding-right: 0.5rem; }
.pr-4    { padding-right: 1rem; }

/* Margin */
.m-0       { margin: 0; }
.mb-0\.5   { margin-bottom: 0.125rem; }
.mb-1      { margin-bottom: 0.25rem; }
.mb-2      { margin-bottom: 0.5rem; }
.mb-3      { margin-bottom: 0.75rem; }
.mb-4      { margin-bottom: 1rem; }
.mt-1      { margin-top: 0.25rem; }
.mt-2      { margin-top: 0.5rem; }
.ml-0\.5   { margin-left: 0.125rem; }
.ml-1      { margin-left: 0.25rem; }
.ml-2      { margin-left: 0.5rem; }
.ml-auto   { margin-left: auto; }
.mr-1      { margin-right: 0.25rem; }
.mr-2      { margin-right: 0.5rem; }
.mx-1      { margin-left: 0.25rem;  margin-right: 0.25rem; }
.mx-4      { margin-left: 1rem;     margin-right: 1rem; }
.mx-auto   { margin-left: auto;     margin-right: auto; }

/* Gap */
.gap-0\.5 { gap: 0.125rem; }
.gap-1    { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2    { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3    { gap: 0.75rem; }
.gap-4    { gap: 1rem; }
.gap-px   { gap: 1px; }

/* Space-y (stack children) */
.space-y-0\.5 > * + * { margin-top: 0.125rem; }
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }

/* Typography — size */
.text-xs   { font-size: 0.75rem;   line-height: 1rem; }
.text-sm   { font-size: 0.875rem;  line-height: 1.25rem; }
.text-base { font-size: 1rem;      line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem;  line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;   line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;    line-height: 2rem; }
.text-3xl  { font-size: 1.875rem;  line-height: 2.25rem; }

/* Typography — weight / style */
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.uppercase     { text-transform: uppercase; }
.italic        { font-style: italic; }

/* Typography — alignment / decoration */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.tracking-wide   { letter-spacing: 0.025em; }
.tracking-widest { letter-spacing: 0.1em; }
.leading-relaxed { line-height: 1.625; }

/* Typography — overflow */
.truncate          { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.break-words       { overflow-wrap: break-word; }
.break-all         { word-break: break-all; }

/* User interaction */
.select-none { user-select: none; }
.select-all  { user-select: all; }
.cursor-pointer     { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.pointer-events-none { pointer-events: none; }

/* Object fit */
.object-cover { object-fit: cover; }

/* Opacity */
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }

/* ── Colors — text ─────────────────────────────────────────────── */
.text-content-primary   { color: var(--sonis-content-primary); }
.text-content-secondary { color: var(--sonis-content-secondary); }
.text-content-muted     { color: var(--sonis-content-muted); }
.text-accent-brand      { color: var(--sonis-accent-brand); }
.text-accent-secondary  { color: var(--sonis-accent-secondary); }
.text-accent-success    { color: var(--sonis-accent-success); }
.text-accent-warning    { color: var(--sonis-accent-warning); }
.text-accent-danger     { color: var(--sonis-accent-danger); }
.text-white             { color: #fff; }

/* ── Colors — background ────────────────────────────────────────── */
.bg-surface-base    { background-color: var(--sonis-surface-base); }
.bg-surface-raised  { background-color: var(--sonis-surface-raised); }
.bg-surface-overlay { background-color: var(--sonis-surface-overlay); }
.bg-surface-sunken  { background-color: var(--sonis-surface-sunken); }
.bg-content-muted   { background-color: var(--sonis-content-muted); }
.bg-accent-brand    { background-color: var(--sonis-accent-brand); }
.bg-accent-success  { background-color: var(--sonis-accent-success); }
.bg-accent-danger   { background-color: var(--sonis-accent-danger); }
.bg-black\/60       { background-color: rgba(0, 0, 0, 0.6); }
.bg-transparent     { background-color: transparent; }
.bg-white           { background-color: #fff; }

/* Opacity-tinted backgrounds (color-mix requires a modern browser — Chrome 111+, FF 113+, Safari 16.2+) */
.bg-surface-overlay\/50 {
  background-color: color-mix(in srgb, var(--sonis-surface-overlay) 50%, transparent);
}
.bg-surface-sunken\/50 {
  background-color: color-mix(in srgb, var(--sonis-surface-sunken) 50%, transparent);
}

/* ── Colors — border ────────────────────────────────────────────── */
.border-surface-overlay { border-color: var(--sonis-surface-overlay); }
.border-surface-raised  { border-color: var(--sonis-surface-raised); }
.border-accent-brand    { border-color: var(--sonis-accent-brand); }
.border-content-muted   { border-color: var(--sonis-content-muted); }
.border-accent-danger   { border-color: var(--sonis-accent-danger); }
.border-accent-success  { border-color: var(--sonis-accent-success); }

/* ── Border — width / side ──────────────────────────────────────── */
/* Use border-width + border-style separately so that border-color
   utility classes (above) are never clobbered by the shorthand. */
.border   { border-width: 1px; border-style: solid; }
.border-2 { border-width: 2px; border-style: solid; }
.border-4 { border-width: 4px; border-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t { border-top-width: 1px;    border-top-style: solid; }
.border-l { border-left-width: 1px;   border-left-style: solid; }
.border-r { border-right-width: 1px;  border-right-style: solid; }

/* ── Border radius ──────────────────────────────────────────────── */
.rounded      { border-radius: 0.25rem; }
.rounded-md   { border-radius: 0.375rem; }
.rounded-lg   { border-radius: 0.5rem; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-3xl  { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

/* ── Hover — text color ─────────────────────────────────────────── */
.hover\:text-content-primary:hover  { color: var(--sonis-content-primary); }
.hover\:text-accent-brand:hover     { color: var(--sonis-accent-brand); }
.hover\:text-accent-danger:hover    { color: var(--sonis-accent-danger); }
.hover\:text-white:hover            { color: #fff; }

/* ── Hover — background ─────────────────────────────────────────── */
.hover\:bg-surface-raised:hover   { background-color: var(--sonis-surface-raised); }
.hover\:bg-surface-overlay:hover  { background-color: var(--sonis-surface-overlay); }
.hover\:bg-surface-sunken:hover   { background-color: var(--sonis-surface-sunken); }
.hover\:bg-accent-brand:hover     { background-color: var(--sonis-accent-brand); }
.hover\:bg-accent-success:hover   { background-color: var(--sonis-accent-success); }
.hover\:bg-accent-danger:hover    { background-color: var(--sonis-accent-danger); }
.hover\:opacity-90:hover          { opacity: 0.9; }

.hover\:bg-surface-overlay\/50:hover {
  background-color: color-mix(in srgb, var(--sonis-surface-overlay) 50%, transparent);
}
.hover\:bg-accent-danger\/80:hover {
  background-color: color-mix(in srgb, var(--sonis-accent-danger) 80%, transparent);
}
.hover\:bg-surface-overlay\/80:hover {
  background-color: color-mix(in srgb, var(--sonis-surface-overlay) 80%, transparent);
}

/* ── Hover — border ─────────────────────────────────────────────── */
.hover\:border-content-muted:hover    { border-color: var(--sonis-content-muted); }
.hover\:border-surface-overlay:hover  { border-color: var(--sonis-surface-overlay); }
.hover\:rounded-2xl:hover             { border-radius: 1rem; }

/* ── Focus states ───────────────────────────────────────────────── */
.focus\:border-accent-brand:focus { border-color: var(--sonis-accent-brand); }
.focus\:border-accent-danger:focus { border-color: var(--sonis-accent-danger); }

/* ── Transitions ────────────────────────────────────────────────── */
.transition-colors {
  transition-property: color, background-color, border-color;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
.transition-all { transition: all 150ms ease; }
.duration-150   { transition-duration: 150ms; }
.duration-200   { transition-duration: 200ms; }

/* ── Shadows ────────────────────────────────────────────────────── */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4); }

/* ── Ring (speaking indicator) ──────────────────────────────────── */
.ring-1 {
  box-shadow: 0 0 0 1px var(--ring-color, rgba(255, 255, 255, 0.1));
}
.ring-accent-success { --ring-color: var(--sonis-accent-success); }

/* ── Misc ───────────────────────────────────────────────────────── */
.appearance-none { appearance: none; }
.outline-none    { outline: none; }
.resize-none     { resize: none; }
.invisible       { visibility: hidden; }
.accent-accent-brand { accent-color: var(--sonis-accent-brand); }

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
.animate-spin   { animation: spin 1s linear infinite; }
.animate-bounce { animation: bounce 1s infinite; }
.animate-pulse  { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ── Message bubble hover ─────────────────────────────────────────── */
.msg-bubble {
  background-color: transparent;
  transition: background-color 150ms ease;
}
.msg-bubble:hover {
  background-color: color-mix(in srgb, var(--sonis-surface-sunken) 50%, transparent);
}
.msg-bubble .msg-actions {
  display: none;
}
.msg-bubble:hover .msg-actions {
  display: flex;
}

/* ── Channel row / member row hover actions ───────────────────────── */
.hover-row .row-actions {
  display: none;
}
.hover-row:hover .row-actions {
  display: flex;
}

/* ── Drag-and-drop upload zones ────────────────────────────────── */
.dropzone {
  transition: background-color 150ms ease;
}
.dropzone.drag-over {
  outline: 2px solid var(--sonis-accent-brand);
  outline-offset: -2px;
  background-color: color-mix(in srgb, var(--sonis-accent-brand) 6%, transparent);
}

/* ── Badge variants (Badge.razor) ───────────────────────────────── */
.badge-default  {
  background-color: var(--sonis-surface-overlay);
  color: var(--sonis-content-secondary);
}
.badge-brand    {
  background-color: color-mix(in srgb, var(--sonis-accent-brand) 20%, transparent);
  color: var(--sonis-accent-brand);
}
.badge-success  {
  background-color: color-mix(in srgb, var(--sonis-accent-success) 20%, transparent);
  color: var(--sonis-accent-success);
}
.badge-warning  {
  background-color: color-mix(in srgb, var(--sonis-accent-warning) 20%, transparent);
  color: var(--sonis-accent-warning);
}
.badge-danger   {
  background-color: color-mix(in srgb, var(--sonis-accent-danger) 20%, transparent);
  color: var(--sonis-accent-danger);
}
.badge-muted    {
  background-color: var(--sonis-surface-overlay);
  color: var(--sonis-content-muted);
}