:root{
  --glass-bg: rgba(255,255,255,0.22);
  --glass-bg-2: rgba(255,255,255,0.14);
  --glass-border: rgba(255,255,255,0.35);
  --shadow: 0 12px 40px rgba(0,0,0,0.22);
  --radius: 22px;
  --gap-lg: 18px;
  --text: rgba(20,20,25,0.92);
  --muted: rgba(20,20,25,0.55);
}
.sonnet{ position: relative; width: 100%; min-height: 70vh; }
.sonnet-bg{ position: fixed; inset: 0; z-index: -2; overflow:hidden; }
.sonnet-bg__video{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.02); }
.sonnet-bg__veil{ position:absolute; inset:0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.35), rgba(255,255,255,0.08) 40%, rgba(0,0,0,0.18) 100%); backdrop-filter: blur(2px); }
.glass{ background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--shadow); border-radius: var(--radius); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.glass--thin{ background: var(--glass-bg-2); box-shadow: 0 10px 28px rgba(0,0,0,0.18); }
.glass--thick{ background: rgba(255,255,255,0.24); box-shadow: 0 14px 46px rgba(0,0,0,0.24); }
.sonnet-layer--main{ max-width: 460px; margin: 0 auto; padding: 14px 12px 18px; }
.sonnet-topbar{ display:flex; align-items:center; justify-content:space-between; padding: 12px 14px; position: sticky; top: 10px; z-index: 5; }
.sonnet-topbar__title{ display:flex; flex-direction:column; gap:2px; }
.sonnet-brand{ font-weight: 700; letter-spacing: .2px; color: var(--text); }
.sonnet-sub{ font-size: 12px; color: var(--muted); }
.sonnet-iconbtn{ border:0; background: rgba(255,255,255,0.35); border:1px solid rgba(255,255,255,0.4); padding: 8px 10px; border-radius: 14px; cursor:pointer; }
.sonnet-stage{ padding: 14px 2px 92px; min-height: 520px; }
.sonnet-tabbar{ position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; width: min(460px, calc(100% - 24px)); display:flex; gap: 8px; padding: 10px; z-index: 6; }
.sonnet-tab{ flex:1; border: 0; border-radius: 16px; padding: 10px 8px; background: rgba(255,255,255,0.26); cursor:pointer; color: rgba(20,20,25,0.7); font-weight: 600; }
.sonnet-tab.is-active{ background: rgba(255,255,255,0.44); color: rgba(20,20,25,0.92); }
.card{ padding: 14px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.18); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 10px 28px rgba(0,0,0,0.16); }
.list{ display:flex; flex-direction:column; gap: var(--gap-lg); }
.row{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.title{ font-size: 15px; font-weight: 700; color: var(--text); }
.meta{ font-size: 12px; color: var(--muted); }
.btn{ border: 0; background: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.45); border-radius: 16px; padding: 10px 12px; cursor:pointer; font-weight: 600; color: rgba(20,20,25,0.86); }
.input{ width:100%; border: 1px solid rgba(255,255,255,0.45); background: rgba(255,255,255,0.24); border-radius: 16px; padding: 12px 12px; outline: none; }
.chat-bubble{ max-width: 86%; padding: 12px 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.38); background: rgba(255,255,255,0.22); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 10px 22px rgba(0,0,0,0.12); }
.chat-bubble.me{ margin-left:auto; background: rgba(255,255,255,0.34); }
.chat-gap{ display:flex; flex-direction:column; gap: 10px; }
.segment{ display:flex; gap: 8px; padding: 6px; border-radius: 16px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35); }
.segment button{ flex:1; border:0; padding: 10px 8px; border-radius: 12px; background: transparent; cursor:pointer; color: rgba(20,20,25,0.65); font-weight: 600; }
.segment button.is-active{ background: rgba(255,255,255,0.42); color: rgba(20,20,25,0.9); }
.hr{ height:1px; background: rgba(255,255,255,0.35); margin: 10px 0; border:0; }
.small{ font-size: 12px; color: var(--muted); }


/* App-like fullscreen mode */
html.sonnet-appmode, body.sonnet-appmode {
  height: 100%;
  overflow: hidden !important;
}
body.sonnet-appmode { margin: 0 !important; padding: 0 !important; }
body.sonnet-appmode .sonnet-hide { display:none !important; }
body.sonnet-appmode #sonnet-app {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
}

.sonnet-page{ padding: 18px 16px 96px; }
.sonnet-page__title{ font-size: 22px; font-weight: 600; margin: 6px 6px 14px; letter-spacing: .3px; }
.sonnet-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sonnet-card{ text-align:left; padding: 16px; border:0; width:100%; cursor:pointer; }
.sonnet-card__title{ font-size: 16px; font-weight: 600; }
.sonnet-card__sub{ margin-top: 6px; opacity: .75; font-size: 12px; }