.circle-product {
  --circle-accent:#e69a68; --circle-accent-strong:#f2b27f; --circle-panel:rgba(26,20,25,.9);
  position:relative; min-height:0; display:grid; grid-template-columns:clamp(180px,16vw,230px) minmax(0,1fr); gap:10px;
}
.circle-product[hidden],.circle-product [hidden],.circle-manage-menu[hidden],.circle-attachment-tray[hidden] { display:none!important; }
.circle-selector,.circle-chat-panel,.circle-members { min-width:0; border:1px solid rgba(244,185,139,.13); border-radius:21px; background:linear-gradient(155deg,rgba(31,24,31,.96),rgba(14,17,26,.96)); box-shadow:0 18px 50px rgba(0,0,0,.2); }
.circle-selector,.circle-members { padding:13px; overflow:auto; scrollbar-width:thin; }
.circle-members { position:fixed; z-index:35; right:14px; top:86px; bottom:16px; width:min(285px,calc(100vw - 28px)); box-sizing:border-box; box-shadow:0 28px 85px rgba(0,0,0,.62); }
.circle-members:not(.open) { display:none; }
.circle-chat-panel { position:relative; min-height:0; display:flex; flex-direction:column; padding:8px 10px 10px; overflow:hidden; }
.circle-panel-head,.circle-toolbar { display:flex; align-items:center; gap:8px; }
.circle-panel-head { justify-content:space-between; margin-bottom:13px; }
.circle-selector-actions { display:flex; gap:6px; }
#circleSelectorClose { display:none; }
.circle-panel-head span,.circle-selector h3 { display:block; margin:0 0 3px; color:#b69485; font-size:.68rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.circle-panel-head strong { display:block; font-size:1.02rem; }
.circle-selector section { margin:14px 0; }
.circle-selector h3 { padding:0 4px; }
.circle-list,#circleMemberList { display:grid; gap:6px; }
.circle-list button,.circle-product button,.circle-dialog button,.circle-dialog input,.circle-dialog textarea,.circle-dialog select { border:1px solid rgba(244,185,139,.18); border-radius:11px; background:#261e29; color:#fff4ee; font:inherit; }
.circle-product button,.circle-dialog button { padding:7px 10px; cursor:pointer; }
.circle-product button:hover,.circle-product button:focus-visible,.circle-dialog button:focus-visible { border-color:var(--circle-accent); outline:none; }
.circle-list button { width:100%; min-width:0; padding:9px 10px; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.circle-list button.active { border-color:#f4b589; background:linear-gradient(135deg,#8d4d36,#60372f); }
.circle-list .circle-invite-item { white-space:normal; color:#ffd8bd; }
.circle-toolbar { min-height:44px; padding:0 2px 5px; }
.circle-current { min-width:0; flex:1; display:grid; }
.circle-current strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.circle-current span { color:#a9949a; font-size:.72rem; }
#circleSelectorToggle { display:none; }
#circleMembersClose { display:inline-grid; }
#circleManageToggle { width:39px; min-width:39px; letter-spacing:.08em; }
.circle-manage-menu { position:absolute; z-index:30; right:10px; top:54px; width:220px; padding:7px; border:1px solid rgba(244,185,139,.18); border-radius:15px; background:#1d1721; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.circle-manage-menu button { display:block; width:100%; margin:2px 0; text-align:left; border-color:transparent; background:transparent; }
.circle-manage-menu .danger { color:#ffb8b8; }
.circle-chat { flex:1; min-height:0; padding:clamp(15px,2vw,28px); }
.circle-chat .our-space-message { margin-bottom:18px; }
.circle-chat .our-space-bubble { max-width:min(760px,80%); border:1px solid rgba(244,185,139,.08); background:rgba(40,31,41,.94); }
.circle-chat .our-space-message.user .our-space-bubble { background:linear-gradient(145deg,#8d4d36,#663b35); }
.circle-chat .our-space-message.system { justify-content:center; }
.circle-chat .our-space-message.system .our-space-bubble { max-width:min(620px,92%); color:#d8c6bd; text-align:center; background:rgba(97,69,70,.28); border-style:dashed; }
.circle-chat .our-space-bubble strong { color:#f5bb92; }
.circle-message-meta { display:block; margin-top:6px; color:#b49ca0; font-size:.68rem; }
.circle-translation-note { margin-top:7px; color:#cdb4aa; font-size:.7rem; }
.circle-message-attachments { display:grid; gap:7px; margin-top:10px; }
.circle-message-attachments a { color:#ffc6a1; overflow-wrap:anywhere; }
.circle-message-attachments img { display:block; width:min(360px,100%); max-height:260px; object-fit:contain; border-radius:12px; background:#120f16; }
.circle-sources { display:grid; gap:5px; margin-top:11px; padding-top:9px; border-top:1px solid rgba(255,255,255,.12); }
.circle-sources a { color:#ffc6a1; font-size:.8rem; }
.circle-composer { position:relative; grid-template-columns:38px 38px minmax(120px,1fr) 38px 46px; align-items:end; gap:5px; margin:4px 0 0; padding:7px; border:1px solid rgba(244,185,139,.15); border-radius:20px; background:rgba(24,19,26,.97); }
.circle-composer textarea { min-height:42px; max-height:116px; padding:10px 11px; border:0; background:transparent; resize:none; }
.circle-composer textarea:focus { box-shadow:none; border:0; }
.circle-composer button { width:38px; height:38px; min-width:38px; padding:0; display:grid; place-items:center; background:transparent; }
.circle-composer #circleSend,.circle-composer #circleStop { width:46px; background:#9a553b; }
.circle-composer #circleStop { background:#9d3d4b; }
#circleMic[aria-pressed="true"] { background:#8d4d36; }
#circleMic svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.circle-emoji-picker { position:absolute; z-index:40; left:7px; bottom:calc(100% + 8px); }
.circle-attachment-tray { display:flex; gap:6px; flex-wrap:wrap; padding:7px 2px; }
.circle-attachment-tray button { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:999px; font-size:.76rem; }
#circleRetry { align-self:flex-start; margin-top:5px; }
.circle-member { display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px; padding:9px; border-radius:13px; background:rgba(244,185,139,.06); }
.circle-member div { min-width:0; display:grid; }
.circle-member strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.circle-member span { color:#af999e; font-size:.7rem; }
.circle-member button { padding:4px 7px; font-size:.7rem; }
.circle-mira-member { display:grid; margin:10px 0 0; padding:10px; border:1px solid rgba(230,154,104,.18); border-radius:14px; color:#f2bd9d; background:rgba(142,78,54,.1); }
.circle-mira-member span { margin-top:3px; color:#bca4a3; font-size:.7rem; }
.circle-mira-member[data-mode="OFF"] { opacity:.72; }
.circle-mira-member[data-mode="ACTIVE"] { border-color:rgba(242,178,127,.42); background:rgba(142,78,54,.2); }
.circle-dialog { width:min(520px,calc(100vw - 28px)); max-height:min(680px,calc(100vh - 28px)); padding:0; border:1px solid rgba(244,185,139,.25); border-radius:21px; color:#fff4ee; background:#1c1720; box-shadow:0 30px 100px rgba(0,0,0,.65); }
.circle-dialog::backdrop { background:rgba(4,5,10,.72); backdrop-filter:blur(5px); }
.circle-dialog form { position:relative; display:grid; gap:14px; padding:23px; }
.circle-dialog-close { position:absolute; top:10px; right:10px; width:34px; height:34px; padding:0!important; }
#circleDialogContent { display:grid; gap:11px; padding-right:25px; }
#circleDialogContent h3,#circleDialogContent p { margin:0; }
#circleDialogContent label { display:grid; gap:6px; color:#ceb9b1; font-size:.82rem; }
#circleDialogContent input,#circleDialogContent textarea,#circleDialogContent select { width:100%; box-sizing:border-box; padding:10px; }
.circle-disclosure { margin:0; padding-left:20px; color:#d6c3bc; line-height:1.5; }
.circle-dialog-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.circle-dialog-actions button.primary { border-color:#f2b27f; background:#8d4d36; }
.circle-empty { height:100%; display:grid; place-items:center; color:#a28d91; text-align:center; }

@media (max-width:1180px) {
  .circle-product { grid-template-columns:minmax(0,1fr); }
  .circle-selector { position:fixed; z-index:35; left:calc(var(--sidebar-width) + 16px); top:86px; bottom:16px; width:240px; box-sizing:border-box; box-shadow:0 28px 85px rgba(0,0,0,.62); }
  .circle-selector:not(.open) { display:none; }
  #circleSelectorToggle { display:inline-flex; }
  #circleSelectorClose { display:inline-grid; }
}
@media (max-width:800px) {
  .circle-product { grid-template-columns:minmax(0,1fr); }
  .circle-members { right:14px; bottom:14px; width:min(290px,calc(100vw - 28px)); }
}
@media (max-width:640px) {
  .circle-selector { left:10px; right:10px; top:82px; bottom:10px; width:auto; }
  .circle-members { left:10px; right:10px; top:82px; bottom:10px; width:auto; }
  .circle-chat-panel { padding:5px; border-radius:18px; }
  .circle-toolbar { min-height:40px; }
  .circle-chat { padding:10px; }
  .circle-chat .our-space-bubble { max-width:94%; }
  .circle-composer { grid-template-columns:34px 34px minmax(0,1fr) 34px 42px; gap:3px; padding:5px; }
  .circle-composer button { width:34px; height:36px; min-width:34px; }
  .circle-composer #circleSend,.circle-composer #circleStop { width:42px; }
}
@media (max-width:440px) {
  #circleCurrentMeta { display:none; }
  .circle-composer { grid-template-columns:34px 34px 34px minmax(0,1fr); }
  #circleInput { grid-column:1/-1; grid-row:1; }
  #circleEmoji,#circleActions,#circleMic { grid-row:2; }
  #circleSend,#circleStop { grid-row:2; grid-column:4; justify-self:end; }
}
@media (prefers-reduced-motion:reduce) { .circle-product * { scroll-behavior:auto!important; transition:none!important; } }