:root{
      --bg1: #fff6ef;
      --orange-600: #ff7a18;
      --orange-700: #ff6a00;
      --accent: linear-gradient(135deg,var(--orange-700),#ff9a3d);
      --muted: #f3f3f3;
      --text: #222;
      --glass: rgba(255,255,255,0.6);
    }

    html,body{
      background: linear-gradient(45deg, #f9f9f9, #ff7a0057) !important;
      height:100%;
      margin:0;
      font-family: Tahoma, "Vazir", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: radial-gradient(1200px 600px at 10% 10%, #fff7f0 0%, #fff2ea 15%, #fff 40%), linear-gradient(180deg,#fff 0%, #fff9f5 100%);
      color:var(--text);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      padding:20px;
      box-sizing:border-box;
    }


    .wrap{
      max-width:980px;
      margin:0 auto;
      display:grid;
      grid-template-columns: 1fr 420px;
      gap:28px;
      align-items:start;
    }

    h1{margin:0 0 12px 0; font-size:20px; text-align:right}
    p.lead{margin:0 0 18px 0; color:#4b4b4b}

    /* Left column: UI big area */
    .panel{
      background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,250,245,0.95));
      border-radius:16px;
      padding:18px;
      box-shadow: 0 10px 30px rgba(15,10,10,0.04);
      min-height:520px;
      position:relative;
      overflow:hidden;
    }

    /* Center visualizer */
    .call-stage{
      display:flex;
      align-items:center;
      justify-content:center;
      height:420px;
      position:relative;
    }

    /* Big grid circle (AI speaking visualization) */
    .big-ring {
      width:360px;
      height:360px;
      border-radius:50%;
      display:grid;
      place-items:center;
      position:relative;
      transition: transform .35s ease;
      z-index:2;
      background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), rgba(255,255,255,0.05) 30%);
    }

    /* grid overlay using SVG background (subtle) */
    .big-ring .grid {
      position:absolute; inset:0;
      border-radius:50%;
      overflow:hidden;
      mask: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0.2) 100%);
    }

    .grid svg { width:100%; height:100%; display:block; transform-origin:center; transition: transform .5s linear; }

    /* animated when AI is speaking */
    .big-ring.ai-speaking {
      transform: scale(1.07);
      filter: drop-shadow(0 20px 40px rgba(255,110,0,0.08));
    }
    .big-ring.ai-speaking .grid svg { animation: spin 6s linear infinite; opacity:1; transform: scale(1.02); }
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* center white mic circle */
    .mic-circle {
      width:150px;
      height:150px;
      border-radius:50%;
      background: linear-gradient(180deg, #ffffff, #fcfcfc);
      display:flex;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      box-shadow: 0 12px 40px rgba(15,10,10,0.07);
      z-index:3;
      transition: transform .2s ease, box-shadow .2s ease;
      position:relative;
    }

    /* small recording pulse ring */
    .mic-circle.recording::before{
      content:"";
      position:absolute;
      inset: -10px;
      border-radius:50%;
      background: radial-gradient(circle at 50% 40%, rgba(255,122,24,0.22), rgba(255,122,24,0.06) 40%, transparent 60%);
      animation: pulse 1.4s infinite;
      z-index:1;
    }
    @keyframes pulse {
      0% { transform: scale(0.95); opacity: .9 }
      50% { transform: scale(1.05); opacity: .55 }
      100% { transform: scale(0.95); opacity: .9 }
    }

    /* icon container inside mic circle */
    .mic-icon {
      width:86px;
      height:86px;
      border-radius:50%;
      background: linear-gradient(180deg, var(--glass), rgba(255,255,255,0.9));
      display:grid; place-items:center;
      z-index:4;
      transform: translateY(0);
      transition: transform .18s ease;
    }

    /* when AI is speaking, mic circle shrinks a bit and shows waveform */
    .mic-circle.ai-speaking {
      transform: scale(0.9);
      box-shadow: 0 8px 30px rgba(255,105,0,0.06);
    }

    .mic-label { margin-top:8px; font-size:13px; color:#555; }

    /* waveform under mic (hidden normally) */
    .wave {
      position:absolute;
      bottom:-12px;
      width:220px;
      height:48px;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:2;
      pointer-events:none;
      opacity:0;
      transition: opacity .25s ease, transform .25s ease;
      transform: translateY(6px);
    }
    .mic-circle.ai-speaking .wave { opacity:1; transform: translateY(0); }

    /* right column: controls & logs */
    .sidebar{
      background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,250,247,0.98));
      border-radius:12px;
      padding:16px;
      box-shadow: 0 8px 30px rgba(15,10,10,0.03);
      min-height:520px;
    }

    .controls { display:flex; gap:8px; margin-bottom:12px; justify-content:flex-end; }
    button.btn {
      padding:10px 16px;
      border-radius:10px;
      border:0; cursor:pointer; font-weight:600;
      box-shadow: 0 6px 18px rgba(255,110,0,0.08);
      background: var(--accent);
      color:white;
    }
    button.btn.secondary {
      background: transparent; color: var(--orange-700); border:1px solid rgba(255,110,0,0.12);
      box-shadow:none; font-weight:600;
    }
    button.btn:disabled { opacity:.6; cursor:not-allowed; box-shadow:none; }

    #status{font-size:13px; margin-bottom:10px; text-align:right}
    #log{display:none;width:100%;height:300px;border-radius:8px;border:1px solid #eee;padding:10px;overflow:auto;background:#fff; white-space:pre-line; font-size:13px; color:#333}

    footer.note { margin-top:12px; color:#666; font-size:13px; text-align:right }

    /* responsive */
    @media(max-width:980px){
      .wrap{ grid-template-columns: 1fr; padding-bottom:40px; }
      .call-stage{ height:360px }
      .big-ring { width:300px; height:300px; }
    }