@lokutor/sdk 1.1.40 → 1.1.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.js +69 -24
  2. package/dist/index.mjs +69 -24
  3. package/package.json +1 -1
  4. package/src/conversational-panel.ts +70 -25
package/dist/index.js CHANGED
@@ -1362,7 +1362,7 @@ var PANEL_CSS = (
1362
1362
  position: relative;
1363
1363
  width: 100%;
1364
1364
  aspect-ratio: 16 / 9;
1365
- max-height: clamp(400px, 50vh, 800px);
1365
+ max-height: clamp(200px, 50vh, 800px);
1366
1366
  display: flex;
1367
1367
  flex-direction: column;
1368
1368
  align-items: center;
@@ -1371,8 +1371,9 @@ var PANEL_CSS = (
1371
1371
  margin: 0;
1372
1372
  background: var(--cv-bg, #0a0a0a);
1373
1373
  box-shadow: inset 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 0 100px rgba(0, 0, 0, 0.05);
1374
- border-radius: clamp(20px, 5vw, 40px);
1374
+ border-radius: clamp(12px, 4vw, 40px);
1375
1375
  overflow: hidden;
1376
+ container-type: size;
1376
1377
  }
1377
1378
  .cv-curtain {
1378
1379
  position: absolute;
@@ -1574,29 +1575,73 @@ var PANEL_CSS = (
1574
1575
  .cv-error.is-visible { display: flex; }
1575
1576
  .cv-error-icon { color: var(--cv-accent); flex-shrink: 0; }
1576
1577
 
1577
- @media (max-width: 768px) {
1578
- .cv-panel { max-height: 600px; border-radius: 24px; }
1579
- .cv-curtain-content { padding: clamp(0.75rem, 3vw, 1.5rem); gap: clamp(0.5rem, 2vw, 1rem); }
1580
- .cv-curtain-title { font-size: clamp(1rem, 5vw, 1.8rem); }
1581
- .cv-curtain-desc { font-size: clamp(0.65rem, 2.5vw, 0.95rem); max-width: 90vw; }
1582
- .cv-curtain-btn { padding: clamp(0.45rem, 1.5vw, 0.75rem) clamp(1rem, 3vw, 2rem); font-size: clamp(0.65rem, 1.5vw, 0.9rem); }
1583
- .cv-visualizer-wrap { width: clamp(100px, 45vw, 220px); height: clamp(100px, 45vw, 220px); }
1584
- .cv-title { font-size: clamp(0.9rem, 2vw, 1.5rem); gap: clamp(0.5rem, 1vw, 0.75rem); }
1585
- .cv-controls { gap: clamp(1rem, 2vw, 1.5rem); padding-bottom: clamp(1rem, 2vw, 1.5rem); }
1586
- .cv-pill { padding: clamp(0.2rem, 1vw, 0.4rem) clamp(0.5rem, 1.5vw, 0.75rem); font-size: clamp(0.65rem, 1.5vw, 0.75rem); }
1587
- .cv-btn { padding: clamp(0.25rem, 1vw, 0.35rem) clamp(0.5rem, 1.5vw, 0.75rem); font-size: clamp(0.65rem, 1.5vw, 0.75rem); }
1588
- .cv-error { padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 2vw, 1.5rem); font-size: clamp(0.75rem, 1.5vw, 0.875rem); }
1578
+ /* === COMPACT MODE: < 300px width === */
1579
+ @container (max-width: 299px) {
1580
+ .cv-curtain-content { padding: 0.5rem; gap: 0.3rem; }
1581
+ .cv-curtain-title { font-size: 0.8rem; }
1582
+ .cv-curtain-desc { display: none; }
1583
+ .cv-curtain-btn { padding: 0.3rem 0.6rem; font-size: 0.6rem; gap: 0.3rem; }
1584
+ .cv-curtain-btn svg { display: none; }
1585
+ .cv-visualizer-wrap { width: 60px; height: 60px; }
1586
+ .cv-header { padding-top: 0.75rem; }
1587
+ .cv-title { font-size: 0.7rem; gap: 0.3rem; }
1588
+ .cv-title .cv-timer { display: none; }
1589
+ .cv-controls { gap: 0.6rem; padding-bottom: 0.6rem; }
1590
+ .cv-pill { padding: 0.15rem 0.4rem; gap: 0.3rem; }
1591
+ .cv-btn { padding: 0.2rem 0.4rem; font-size: 0.6rem; gap: 0; }
1592
+ .cv-btn span { display: none; }
1593
+ .cv-btn svg { width: 16px; height: 16px; }
1594
+ .cv-error { padding: 0.4rem 0.8rem; font-size: 0.65rem; bottom: 0.5rem; }
1589
1595
  }
1590
-
1591
- @media (max-width: 480px) {
1592
- .cv-panel { aspect-ratio: 3 / 4; max-height: 500px; border-radius: 20px; }
1593
- .cv-curtain-content { padding: clamp(0.5rem, 2vw, 1rem); gap: clamp(0.4rem, 1.5vw, 0.75rem); }
1594
- .cv-curtain-title { font-size: clamp(0.9rem, 4.5vw, 1.4rem); }
1595
- .cv-curtain-desc { font-size: clamp(0.6rem, 2vw, 0.8rem); }
1596
- .cv-curtain-btn { padding: clamp(0.4rem, 1.2vw, 0.6rem) clamp(0.8rem, 2.5vw, 1.5rem); font-size: clamp(0.6rem, 1.2vw, 0.8rem); }
1597
- .cv-visualizer-wrap { width: clamp(80px, 40vw, 180px); height: clamp(80px, 40vw, 180px); }
1598
- .cv-header { padding-top: clamp(1rem, 2vw, 1.5rem); }
1599
- .cv-controls { gap: clamp(0.8rem, 1.5vw, 1.2rem); padding-bottom: clamp(0.8rem, 1.5vw, 1.2rem); }
1596
+
1597
+ /* === SMALL MODE: 300px - 480px width === */
1598
+ @container (min-width: 300px) and (max-width: 480px) {
1599
+ .cv-curtain-content { padding: 0.75rem; gap: 0.5rem; }
1600
+ .cv-curtain-title { font-size: clamp(0.9rem, 3cqw, 1.2rem); }
1601
+ .cv-curtain-desc { font-size: clamp(0.6rem, 2cqw, 0.8rem); }
1602
+ .cv-curtain-btn { padding: clamp(0.3rem, 1cqw, 0.5rem) clamp(0.6rem, 2cqw, 1rem); font-size: clamp(0.6rem, 1.5cqw, 0.8rem); }
1603
+ .cv-visualizer-wrap { width: clamp(80px, 35cqw, 140px); height: clamp(80px, 35cqw, 140px); }
1604
+ .cv-header { padding-top: 0.8rem; }
1605
+ .cv-title { font-size: clamp(0.7rem, 2.5cqw, 1rem); gap: 0.4rem; }
1606
+ .cv-title .cv-timer { font-size: 0.65em; }
1607
+ .cv-controls { gap: clamp(0.6rem, 1.5cqw, 1rem); padding-bottom: clamp(0.6rem, 1.5cqw, 1rem); }
1608
+ .cv-pill { padding: clamp(0.15rem, 0.5cqw, 0.25rem) clamp(0.35rem, 1cqw, 0.6rem); font-size: 0.65rem; gap: 0.3rem; }
1609
+ .cv-btn { padding: clamp(0.2rem, 0.5cqw, 0.3rem) clamp(0.35rem, 1cqw, 0.6rem); font-size: clamp(0.6rem, 1.2cqw, 0.7rem); }
1610
+ .cv-btn span:last-child { display: none; }
1611
+ .cv-error { padding: clamp(0.4rem, 1cqw, 0.6rem) clamp(0.8rem, 1.5cqw, 1.2rem); font-size: 0.7rem; }
1612
+ }
1613
+
1614
+ /* === MEDIUM MODE: 480px - 768px width === */
1615
+ @container (min-width: 480px) and (max-width: 768px) {
1616
+ .cv-panel { max-height: 600px; aspect-ratio: 3 / 4; }
1617
+ .cv-curtain-content { padding: clamp(0.75rem, 2cqw, 1.25rem); gap: clamp(0.5rem, 1.5cqw, 1rem); }
1618
+ .cv-curtain-title { font-size: clamp(1rem, 4cqw, 1.6rem); }
1619
+ .cv-curtain-desc { font-size: clamp(0.7rem, 2.5cqw, 1rem); }
1620
+ .cv-curtain-btn { padding: clamp(0.45rem, 1.5cqw, 0.7rem) clamp(1rem, 2cqw, 1.5rem); font-size: clamp(0.7rem, 1.5cqw, 0.9rem); }
1621
+ .cv-visualizer-wrap { width: clamp(100px, 40cqw, 200px); height: clamp(100px, 40cqw, 200px); }
1622
+ .cv-header { padding-top: clamp(1rem, 1.5cqw, 1.5rem); }
1623
+ .cv-title { font-size: clamp(0.9rem, 3cqw, 1.3rem); gap: clamp(0.4rem, 1cqw, 0.75rem); }
1624
+ .cv-title .cv-timer { font-size: 0.85em; }
1625
+ .cv-controls { gap: clamp(0.8rem, 1.5cqw, 1.2rem); padding-bottom: clamp(0.8rem, 1.5cqw, 1.2rem); }
1626
+ .cv-pill { padding: clamp(0.2rem, 0.75cqw, 0.3rem) clamp(0.5rem, 1.2cqw, 0.75rem); font-size: 0.7rem; }
1627
+ .cv-btn { padding: clamp(0.25rem, 0.75cqw, 0.35rem) clamp(0.5rem, 1.2cqw, 0.75rem); font-size: clamp(0.65rem, 1.2cqw, 0.8rem); }
1628
+ .cv-error { padding: clamp(0.5rem, 1.2cqw, 0.75rem) clamp(1rem, 1.5cqw, 1.5rem); font-size: clamp(0.7rem, 1.2cqw, 0.85rem); }
1629
+ }
1630
+
1631
+ /* === LARGE MODE: > 768px width === */
1632
+ @container (min-width: 768px) {
1633
+ .cv-curtain-content { padding: clamp(1rem, 2.5cqw, 2rem); gap: clamp(0.75rem, 2cqw, 1.5rem); }
1634
+ .cv-curtain-title { font-size: clamp(1.2rem, 5cqw, 2.5rem); }
1635
+ .cv-curtain-desc { font-size: clamp(0.8rem, 2.5cqw, 1.2rem); max-width: 500px; }
1636
+ .cv-curtain-btn { padding: clamp(0.6rem, 2cqw, 1rem) clamp(1.5rem, 3cqw, 2.5rem); font-size: clamp(0.8rem, 1.5cqw, 1.1rem); }
1637
+ .cv-visualizer-wrap { width: clamp(140px, 45cqw, 300px); height: clamp(140px, 45cqw, 300px); }
1638
+ .cv-header { padding-top: clamp(1.5rem, 2cqw, 2rem); }
1639
+ .cv-title { font-size: clamp(1rem, 3cqw, 1.8rem); gap: clamp(0.75rem, 1.5cqw, 1.2rem); }
1640
+ .cv-title .cv-timer { font-size: 0.9em; }
1641
+ .cv-controls { gap: clamp(1.2rem, 2cqw, 1.8rem); padding-bottom: clamp(1.2rem, 2cqw, 1.8rem); }
1642
+ .cv-pill { padding: clamp(0.3rem, 0.8cqw, 0.4rem) clamp(0.75rem, 1.2cqw, 1rem); font-size: 0.85rem; gap: 0.75rem; }
1643
+ .cv-btn { padding: clamp(0.35rem, 0.8cqw, 0.4rem) clamp(0.75rem, 1.2cqw, 1rem); font-size: clamp(0.75rem, 1.2cqw, 0.9rem); }
1644
+ .cv-error { padding: clamp(0.75rem, 1.5cqw, 1rem) clamp(1.5rem, 2cqw, 2rem); font-size: clamp(0.85rem, 1cqw, 1rem); }
1600
1645
  }
1601
1646
  `
1602
1647
  );
package/dist/index.mjs CHANGED
@@ -1315,7 +1315,7 @@ var PANEL_CSS = (
1315
1315
  position: relative;
1316
1316
  width: 100%;
1317
1317
  aspect-ratio: 16 / 9;
1318
- max-height: clamp(400px, 50vh, 800px);
1318
+ max-height: clamp(200px, 50vh, 800px);
1319
1319
  display: flex;
1320
1320
  flex-direction: column;
1321
1321
  align-items: center;
@@ -1324,8 +1324,9 @@ var PANEL_CSS = (
1324
1324
  margin: 0;
1325
1325
  background: var(--cv-bg, #0a0a0a);
1326
1326
  box-shadow: inset 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 0 100px rgba(0, 0, 0, 0.05);
1327
- border-radius: clamp(20px, 5vw, 40px);
1327
+ border-radius: clamp(12px, 4vw, 40px);
1328
1328
  overflow: hidden;
1329
+ container-type: size;
1329
1330
  }
1330
1331
  .cv-curtain {
1331
1332
  position: absolute;
@@ -1527,29 +1528,73 @@ var PANEL_CSS = (
1527
1528
  .cv-error.is-visible { display: flex; }
1528
1529
  .cv-error-icon { color: var(--cv-accent); flex-shrink: 0; }
1529
1530
 
1530
- @media (max-width: 768px) {
1531
- .cv-panel { max-height: 600px; border-radius: 24px; }
1532
- .cv-curtain-content { padding: clamp(0.75rem, 3vw, 1.5rem); gap: clamp(0.5rem, 2vw, 1rem); }
1533
- .cv-curtain-title { font-size: clamp(1rem, 5vw, 1.8rem); }
1534
- .cv-curtain-desc { font-size: clamp(0.65rem, 2.5vw, 0.95rem); max-width: 90vw; }
1535
- .cv-curtain-btn { padding: clamp(0.45rem, 1.5vw, 0.75rem) clamp(1rem, 3vw, 2rem); font-size: clamp(0.65rem, 1.5vw, 0.9rem); }
1536
- .cv-visualizer-wrap { width: clamp(100px, 45vw, 220px); height: clamp(100px, 45vw, 220px); }
1537
- .cv-title { font-size: clamp(0.9rem, 2vw, 1.5rem); gap: clamp(0.5rem, 1vw, 0.75rem); }
1538
- .cv-controls { gap: clamp(1rem, 2vw, 1.5rem); padding-bottom: clamp(1rem, 2vw, 1.5rem); }
1539
- .cv-pill { padding: clamp(0.2rem, 1vw, 0.4rem) clamp(0.5rem, 1.5vw, 0.75rem); font-size: clamp(0.65rem, 1.5vw, 0.75rem); }
1540
- .cv-btn { padding: clamp(0.25rem, 1vw, 0.35rem) clamp(0.5rem, 1.5vw, 0.75rem); font-size: clamp(0.65rem, 1.5vw, 0.75rem); }
1541
- .cv-error { padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 2vw, 1.5rem); font-size: clamp(0.75rem, 1.5vw, 0.875rem); }
1531
+ /* === COMPACT MODE: < 300px width === */
1532
+ @container (max-width: 299px) {
1533
+ .cv-curtain-content { padding: 0.5rem; gap: 0.3rem; }
1534
+ .cv-curtain-title { font-size: 0.8rem; }
1535
+ .cv-curtain-desc { display: none; }
1536
+ .cv-curtain-btn { padding: 0.3rem 0.6rem; font-size: 0.6rem; gap: 0.3rem; }
1537
+ .cv-curtain-btn svg { display: none; }
1538
+ .cv-visualizer-wrap { width: 60px; height: 60px; }
1539
+ .cv-header { padding-top: 0.75rem; }
1540
+ .cv-title { font-size: 0.7rem; gap: 0.3rem; }
1541
+ .cv-title .cv-timer { display: none; }
1542
+ .cv-controls { gap: 0.6rem; padding-bottom: 0.6rem; }
1543
+ .cv-pill { padding: 0.15rem 0.4rem; gap: 0.3rem; }
1544
+ .cv-btn { padding: 0.2rem 0.4rem; font-size: 0.6rem; gap: 0; }
1545
+ .cv-btn span { display: none; }
1546
+ .cv-btn svg { width: 16px; height: 16px; }
1547
+ .cv-error { padding: 0.4rem 0.8rem; font-size: 0.65rem; bottom: 0.5rem; }
1542
1548
  }
1543
-
1544
- @media (max-width: 480px) {
1545
- .cv-panel { aspect-ratio: 3 / 4; max-height: 500px; border-radius: 20px; }
1546
- .cv-curtain-content { padding: clamp(0.5rem, 2vw, 1rem); gap: clamp(0.4rem, 1.5vw, 0.75rem); }
1547
- .cv-curtain-title { font-size: clamp(0.9rem, 4.5vw, 1.4rem); }
1548
- .cv-curtain-desc { font-size: clamp(0.6rem, 2vw, 0.8rem); }
1549
- .cv-curtain-btn { padding: clamp(0.4rem, 1.2vw, 0.6rem) clamp(0.8rem, 2.5vw, 1.5rem); font-size: clamp(0.6rem, 1.2vw, 0.8rem); }
1550
- .cv-visualizer-wrap { width: clamp(80px, 40vw, 180px); height: clamp(80px, 40vw, 180px); }
1551
- .cv-header { padding-top: clamp(1rem, 2vw, 1.5rem); }
1552
- .cv-controls { gap: clamp(0.8rem, 1.5vw, 1.2rem); padding-bottom: clamp(0.8rem, 1.5vw, 1.2rem); }
1549
+
1550
+ /* === SMALL MODE: 300px - 480px width === */
1551
+ @container (min-width: 300px) and (max-width: 480px) {
1552
+ .cv-curtain-content { padding: 0.75rem; gap: 0.5rem; }
1553
+ .cv-curtain-title { font-size: clamp(0.9rem, 3cqw, 1.2rem); }
1554
+ .cv-curtain-desc { font-size: clamp(0.6rem, 2cqw, 0.8rem); }
1555
+ .cv-curtain-btn { padding: clamp(0.3rem, 1cqw, 0.5rem) clamp(0.6rem, 2cqw, 1rem); font-size: clamp(0.6rem, 1.5cqw, 0.8rem); }
1556
+ .cv-visualizer-wrap { width: clamp(80px, 35cqw, 140px); height: clamp(80px, 35cqw, 140px); }
1557
+ .cv-header { padding-top: 0.8rem; }
1558
+ .cv-title { font-size: clamp(0.7rem, 2.5cqw, 1rem); gap: 0.4rem; }
1559
+ .cv-title .cv-timer { font-size: 0.65em; }
1560
+ .cv-controls { gap: clamp(0.6rem, 1.5cqw, 1rem); padding-bottom: clamp(0.6rem, 1.5cqw, 1rem); }
1561
+ .cv-pill { padding: clamp(0.15rem, 0.5cqw, 0.25rem) clamp(0.35rem, 1cqw, 0.6rem); font-size: 0.65rem; gap: 0.3rem; }
1562
+ .cv-btn { padding: clamp(0.2rem, 0.5cqw, 0.3rem) clamp(0.35rem, 1cqw, 0.6rem); font-size: clamp(0.6rem, 1.2cqw, 0.7rem); }
1563
+ .cv-btn span:last-child { display: none; }
1564
+ .cv-error { padding: clamp(0.4rem, 1cqw, 0.6rem) clamp(0.8rem, 1.5cqw, 1.2rem); font-size: 0.7rem; }
1565
+ }
1566
+
1567
+ /* === MEDIUM MODE: 480px - 768px width === */
1568
+ @container (min-width: 480px) and (max-width: 768px) {
1569
+ .cv-panel { max-height: 600px; aspect-ratio: 3 / 4; }
1570
+ .cv-curtain-content { padding: clamp(0.75rem, 2cqw, 1.25rem); gap: clamp(0.5rem, 1.5cqw, 1rem); }
1571
+ .cv-curtain-title { font-size: clamp(1rem, 4cqw, 1.6rem); }
1572
+ .cv-curtain-desc { font-size: clamp(0.7rem, 2.5cqw, 1rem); }
1573
+ .cv-curtain-btn { padding: clamp(0.45rem, 1.5cqw, 0.7rem) clamp(1rem, 2cqw, 1.5rem); font-size: clamp(0.7rem, 1.5cqw, 0.9rem); }
1574
+ .cv-visualizer-wrap { width: clamp(100px, 40cqw, 200px); height: clamp(100px, 40cqw, 200px); }
1575
+ .cv-header { padding-top: clamp(1rem, 1.5cqw, 1.5rem); }
1576
+ .cv-title { font-size: clamp(0.9rem, 3cqw, 1.3rem); gap: clamp(0.4rem, 1cqw, 0.75rem); }
1577
+ .cv-title .cv-timer { font-size: 0.85em; }
1578
+ .cv-controls { gap: clamp(0.8rem, 1.5cqw, 1.2rem); padding-bottom: clamp(0.8rem, 1.5cqw, 1.2rem); }
1579
+ .cv-pill { padding: clamp(0.2rem, 0.75cqw, 0.3rem) clamp(0.5rem, 1.2cqw, 0.75rem); font-size: 0.7rem; }
1580
+ .cv-btn { padding: clamp(0.25rem, 0.75cqw, 0.35rem) clamp(0.5rem, 1.2cqw, 0.75rem); font-size: clamp(0.65rem, 1.2cqw, 0.8rem); }
1581
+ .cv-error { padding: clamp(0.5rem, 1.2cqw, 0.75rem) clamp(1rem, 1.5cqw, 1.5rem); font-size: clamp(0.7rem, 1.2cqw, 0.85rem); }
1582
+ }
1583
+
1584
+ /* === LARGE MODE: > 768px width === */
1585
+ @container (min-width: 768px) {
1586
+ .cv-curtain-content { padding: clamp(1rem, 2.5cqw, 2rem); gap: clamp(0.75rem, 2cqw, 1.5rem); }
1587
+ .cv-curtain-title { font-size: clamp(1.2rem, 5cqw, 2.5rem); }
1588
+ .cv-curtain-desc { font-size: clamp(0.8rem, 2.5cqw, 1.2rem); max-width: 500px; }
1589
+ .cv-curtain-btn { padding: clamp(0.6rem, 2cqw, 1rem) clamp(1.5rem, 3cqw, 2.5rem); font-size: clamp(0.8rem, 1.5cqw, 1.1rem); }
1590
+ .cv-visualizer-wrap { width: clamp(140px, 45cqw, 300px); height: clamp(140px, 45cqw, 300px); }
1591
+ .cv-header { padding-top: clamp(1.5rem, 2cqw, 2rem); }
1592
+ .cv-title { font-size: clamp(1rem, 3cqw, 1.8rem); gap: clamp(0.75rem, 1.5cqw, 1.2rem); }
1593
+ .cv-title .cv-timer { font-size: 0.9em; }
1594
+ .cv-controls { gap: clamp(1.2rem, 2cqw, 1.8rem); padding-bottom: clamp(1.2rem, 2cqw, 1.8rem); }
1595
+ .cv-pill { padding: clamp(0.3rem, 0.8cqw, 0.4rem) clamp(0.75rem, 1.2cqw, 1rem); font-size: 0.85rem; gap: 0.75rem; }
1596
+ .cv-btn { padding: clamp(0.35rem, 0.8cqw, 0.4rem) clamp(0.75rem, 1.2cqw, 1rem); font-size: clamp(0.75rem, 1.2cqw, 0.9rem); }
1597
+ .cv-error { padding: clamp(0.75rem, 1.5cqw, 1rem) clamp(1.5rem, 2cqw, 2rem); font-size: clamp(0.85rem, 1cqw, 1rem); }
1553
1598
  }
1554
1599
  `
1555
1600
  );
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@lokutor/sdk",
3
3
 
4
- "version": "1.1.40",
4
+ "version": "1.1.41",
5
5
  "description": "JavaScript/TypeScript SDK for Lokutor Real-time Voice AI",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.mjs",
package/src/conversational-panel.ts CHANGED
@@ -3,7 +3,7 @@ const PANEL_CSS = /*css*/ `
3
3
  position: relative;
4
4
  width: 100%;
5
5
  aspect-ratio: 16 / 9;
6
- max-height: clamp(400px, 50vh, 800px);
6
+ max-height: clamp(200px, 50vh, 800px);
7
7
  display: flex;
8
8
  flex-direction: column;
9
9
  align-items: center;
@@ -12,8 +12,9 @@ const PANEL_CSS = /*css*/ `
12
12
  margin: 0;
13
13
  background: var(--cv-bg, #0a0a0a);
14
14
  box-shadow: inset 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 0 100px rgba(0, 0, 0, 0.05);
15
- border-radius: clamp(20px, 5vw, 40px);
15
+ border-radius: clamp(12px, 4vw, 40px);
16
16
  overflow: hidden;
17
+ container-type: size;
17
18
  }
18
19
  .cv-curtain {
19
20
  position: absolute;
@@ -215,29 +216,73 @@ const PANEL_CSS = /*css*/ `
215
216
  .cv-error.is-visible { display: flex; }
216
217
  .cv-error-icon { color: var(--cv-accent); flex-shrink: 0; }
217
218
 
218
- @media (max-width: 768px) {
219
- .cv-panel { max-height: 600px; border-radius: 24px; }
220
- .cv-curtain-content { padding: clamp(0.75rem, 3vw, 1.5rem); gap: clamp(0.5rem, 2vw, 1rem); }
221
- .cv-curtain-title { font-size: clamp(1rem, 5vw, 1.8rem); }
222
- .cv-curtain-desc { font-size: clamp(0.65rem, 2.5vw, 0.95rem); max-width: 90vw; }
223
- .cv-curtain-btn { padding: clamp(0.45rem, 1.5vw, 0.75rem) clamp(1rem, 3vw, 2rem); font-size: clamp(0.65rem, 1.5vw, 0.9rem); }
224
- .cv-visualizer-wrap { width: clamp(100px, 45vw, 220px); height: clamp(100px, 45vw, 220px); }
225
- .cv-title { font-size: clamp(0.9rem, 2vw, 1.5rem); gap: clamp(0.5rem, 1vw, 0.75rem); }
226
- .cv-controls { gap: clamp(1rem, 2vw, 1.5rem); padding-bottom: clamp(1rem, 2vw, 1.5rem); }
227
- .cv-pill { padding: clamp(0.2rem, 1vw, 0.4rem) clamp(0.5rem, 1.5vw, 0.75rem); font-size: clamp(0.65rem, 1.5vw, 0.75rem); }
228
- .cv-btn { padding: clamp(0.25rem, 1vw, 0.35rem) clamp(0.5rem, 1.5vw, 0.75rem); font-size: clamp(0.65rem, 1.5vw, 0.75rem); }
229
- .cv-error { padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 2vw, 1.5rem); font-size: clamp(0.75rem, 1.5vw, 0.875rem); }
230
- }
231
-
232
- @media (max-width: 480px) {
233
- .cv-panel { aspect-ratio: 3 / 4; max-height: 500px; border-radius: 20px; }
234
- .cv-curtain-content { padding: clamp(0.5rem, 2vw, 1rem); gap: clamp(0.4rem, 1.5vw, 0.75rem); }
235
- .cv-curtain-title { font-size: clamp(0.9rem, 4.5vw, 1.4rem); }
236
- .cv-curtain-desc { font-size: clamp(0.6rem, 2vw, 0.8rem); }
237
- .cv-curtain-btn { padding: clamp(0.4rem, 1.2vw, 0.6rem) clamp(0.8rem, 2.5vw, 1.5rem); font-size: clamp(0.6rem, 1.2vw, 0.8rem); }
238
- .cv-visualizer-wrap { width: clamp(80px, 40vw, 180px); height: clamp(80px, 40vw, 180px); }
239
- .cv-header { padding-top: clamp(1rem, 2vw, 1.5rem); }
240
- .cv-controls { gap: clamp(0.8rem, 1.5vw, 1.2rem); padding-bottom: clamp(0.8rem, 1.5vw, 1.2rem); }
219
+ /* === COMPACT MODE: < 300px width === */
220
+ @container (max-width: 299px) {
221
+ .cv-curtain-content { padding: 0.5rem; gap: 0.3rem; }
222
+ .cv-curtain-title { font-size: 0.8rem; }
223
+ .cv-curtain-desc { display: none; }
224
+ .cv-curtain-btn { padding: 0.3rem 0.6rem; font-size: 0.6rem; gap: 0.3rem; }
225
+ .cv-curtain-btn svg { display: none; }
226
+ .cv-visualizer-wrap { width: 60px; height: 60px; }
227
+ .cv-header { padding-top: 0.75rem; }
228
+ .cv-title { font-size: 0.7rem; gap: 0.3rem; }
229
+ .cv-title .cv-timer { display: none; }
230
+ .cv-controls { gap: 0.6rem; padding-bottom: 0.6rem; }
231
+ .cv-pill { padding: 0.15rem 0.4rem; gap: 0.3rem; }
232
+ .cv-btn { padding: 0.2rem 0.4rem; font-size: 0.6rem; gap: 0; }
233
+ .cv-btn span { display: none; }
234
+ .cv-btn svg { width: 16px; height: 16px; }
235
+ .cv-error { padding: 0.4rem 0.8rem; font-size: 0.65rem; bottom: 0.5rem; }
236
+ }
237
+
238
+ /* === SMALL MODE: 300px - 480px width === */
239
+ @container (min-width: 300px) and (max-width: 480px) {
240
+ .cv-curtain-content { padding: 0.75rem; gap: 0.5rem; }
241
+ .cv-curtain-title { font-size: clamp(0.9rem, 3cqw, 1.2rem); }
242
+ .cv-curtain-desc { font-size: clamp(0.6rem, 2cqw, 0.8rem); }
243
+ .cv-curtain-btn { padding: clamp(0.3rem, 1cqw, 0.5rem) clamp(0.6rem, 2cqw, 1rem); font-size: clamp(0.6rem, 1.5cqw, 0.8rem); }
244
+ .cv-visualizer-wrap { width: clamp(80px, 35cqw, 140px); height: clamp(80px, 35cqw, 140px); }
245
+ .cv-header { padding-top: 0.8rem; }
246
+ .cv-title { font-size: clamp(0.7rem, 2.5cqw, 1rem); gap: 0.4rem; }
247
+ .cv-title .cv-timer { font-size: 0.65em; }
248
+ .cv-controls { gap: clamp(0.6rem, 1.5cqw, 1rem); padding-bottom: clamp(0.6rem, 1.5cqw, 1rem); }
249
+ .cv-pill { padding: clamp(0.15rem, 0.5cqw, 0.25rem) clamp(0.35rem, 1cqw, 0.6rem); font-size: 0.65rem; gap: 0.3rem; }
250
+ .cv-btn { padding: clamp(0.2rem, 0.5cqw, 0.3rem) clamp(0.35rem, 1cqw, 0.6rem); font-size: clamp(0.6rem, 1.2cqw, 0.7rem); }
251
+ .cv-btn span:last-child { display: none; }
252
+ .cv-error { padding: clamp(0.4rem, 1cqw, 0.6rem) clamp(0.8rem, 1.5cqw, 1.2rem); font-size: 0.7rem; }
253
+ }
254
+
255
+ /* === MEDIUM MODE: 480px - 768px width === */
256
+ @container (min-width: 480px) and (max-width: 768px) {
257
+ .cv-panel { max-height: 600px; aspect-ratio: 3 / 4; }
258
+ .cv-curtain-content { padding: clamp(0.75rem, 2cqw, 1.25rem); gap: clamp(0.5rem, 1.5cqw, 1rem); }
259
+ .cv-curtain-title { font-size: clamp(1rem, 4cqw, 1.6rem); }
260
+ .cv-curtain-desc { font-size: clamp(0.7rem, 2.5cqw, 1rem); }
261
+ .cv-curtain-btn { padding: clamp(0.45rem, 1.5cqw, 0.7rem) clamp(1rem, 2cqw, 1.5rem); font-size: clamp(0.7rem, 1.5cqw, 0.9rem); }
262
+ .cv-visualizer-wrap { width: clamp(100px, 40cqw, 200px); height: clamp(100px, 40cqw, 200px); }
263
+ .cv-header { padding-top: clamp(1rem, 1.5cqw, 1.5rem); }
264
+ .cv-title { font-size: clamp(0.9rem, 3cqw, 1.3rem); gap: clamp(0.4rem, 1cqw, 0.75rem); }
265
+ .cv-title .cv-timer { font-size: 0.85em; }
266
+ .cv-controls { gap: clamp(0.8rem, 1.5cqw, 1.2rem); padding-bottom: clamp(0.8rem, 1.5cqw, 1.2rem); }
267
+ .cv-pill { padding: clamp(0.2rem, 0.75cqw, 0.3rem) clamp(0.5rem, 1.2cqw, 0.75rem); font-size: 0.7rem; }
268
+ .cv-btn { padding: clamp(0.25rem, 0.75cqw, 0.35rem) clamp(0.5rem, 1.2cqw, 0.75rem); font-size: clamp(0.65rem, 1.2cqw, 0.8rem); }
269
+ .cv-error { padding: clamp(0.5rem, 1.2cqw, 0.75rem) clamp(1rem, 1.5cqw, 1.5rem); font-size: clamp(0.7rem, 1.2cqw, 0.85rem); }
270
+ }
271
+
272
+ /* === LARGE MODE: > 768px width === */
273
+ @container (min-width: 768px) {
274
+ .cv-curtain-content { padding: clamp(1rem, 2.5cqw, 2rem); gap: clamp(0.75rem, 2cqw, 1.5rem); }
275
+ .cv-curtain-title { font-size: clamp(1.2rem, 5cqw, 2.5rem); }
276
+ .cv-curtain-desc { font-size: clamp(0.8rem, 2.5cqw, 1.2rem); max-width: 500px; }
277
+ .cv-curtain-btn { padding: clamp(0.6rem, 2cqw, 1rem) clamp(1.5rem, 3cqw, 2.5rem); font-size: clamp(0.8rem, 1.5cqw, 1.1rem); }
278
+ .cv-visualizer-wrap { width: clamp(140px, 45cqw, 300px); height: clamp(140px, 45cqw, 300px); }
279
+ .cv-header { padding-top: clamp(1.5rem, 2cqw, 2rem); }
280
+ .cv-title { font-size: clamp(1rem, 3cqw, 1.8rem); gap: clamp(0.75rem, 1.5cqw, 1.2rem); }
281
+ .cv-title .cv-timer { font-size: 0.9em; }
282
+ .cv-controls { gap: clamp(1.2rem, 2cqw, 1.8rem); padding-bottom: clamp(1.2rem, 2cqw, 1.8rem); }
283
+ .cv-pill { padding: clamp(0.3rem, 0.8cqw, 0.4rem) clamp(0.75rem, 1.2cqw, 1rem); font-size: 0.85rem; gap: 0.75rem; }
284
+ .cv-btn { padding: clamp(0.35rem, 0.8cqw, 0.4rem) clamp(0.75rem, 1.2cqw, 1rem); font-size: clamp(0.75rem, 1.2cqw, 0.9rem); }
285
+ .cv-error { padding: clamp(0.75rem, 1.5cqw, 1rem) clamp(1.5rem, 2cqw, 2rem); font-size: clamp(0.85rem, 1cqw, 1rem); }
241
286
  }
242
287
  `;
243
288