/* ========================================================= */
/*                      GLOBAL / RESET                       */
/* ========================================================= */
:root{
  --primary-color:#6366f1; --primary-dark:#4f46e5; --accent-color:#22d3ee;
  --success-color:#10b981; --glass-bg:rgba(255,255,255,.1); --glass-border:rgba(255,255,255,.2);
  --glass-shadow:0 4px 30px rgba(0,0,0,.1); --radius:16px;
}

html,body{height:100%;overflow:hidden;}
body{
  font-family:"Poppins",sans-serif;
  background:linear-gradient(135deg,#0f172a,#1e293b);color:#f9fafb;margin:0;
  display:flex;flex-direction:column;
}

/* декоративный мягкий шум */
.bg-glass{position:fixed;inset:0;backdrop-filter:blur(90px) brightness(.8);pointer-events:none;}

/* ========================================================= */
/*                        PANELS                             */
/* ========================================================= */
.glass-panel{
  background:var(--glass-bg);backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--glass-shadow);
}
.glass-header,.glass-footer{
  background:rgba(255,255,255,.07);border-top:1px solid var(--glass-border);
  backdrop-filter:blur(8px);padding:10px 0;
}

/* ========================================================= */
/*                       STATUS DOT                          */
/* ========================================================= */
.status-wrap{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.dot{width:10px;height:10px;border-radius:50%}
.dot.online {background:var(--success-color);}
.dot.offline{background:#ef4444;}

/* ========================================================= */
/*                    CENTER BLOCK (responsive)              */
/* ========================================================= */
.center-block{width:100%;max-width:90vw;}
@media(min-width:576px){.center-block{max-width:350px;}}
@media(min-width:768px){.center-block{max-width:520px;}}
@media(min-width:992px){.center-block{max-width:640px;}}
@media(min-width:1200px){.center-block{max-width:840px;}}

/* ========================================================= */
/*                    WAVEFORM + AUDIO                       */
/* ========================================================= */
.waveform{width:100%;height:150px;border-radius:var(--radius);}
@media(max-width:576px){.waveform{height:110px;}}

.audio-container{width:100%;}
.audio-container audio{
  width:100%;background:rgba(255,255,255,.12);border-radius:var(--radius);
  backdrop-filter:blur(6px);color-scheme:dark;accent-color:var(--accent-color);
}
audio::-webkit-media-controls-panel{background:transparent;}

/* ========================================================= */
/*                        MIC BUTTON                         */
/* ========================================================= */
.mic-button{
  width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));border:none;color:#fff;
  box-shadow:0 4px 18px rgba(99,102,241,.5);transition:transform .25s,background .25s,box-shadow .25s;
}
.mic-button:hover{transform:scale(1.06);}
.mic-button.active{
  background:linear-gradient(135deg,var(--success-color),#34d399);
  box-shadow:0 4px 18px rgba(16,185,129,.5);
}
.mic-button.offline{background:linear-gradient(135deg,#4b5563,#374151);box-shadow:none;cursor:default;}
.mic-button svg{width:40px;height:40px;}