/* Clear-chat control and restored-draft notice, built on the shared tokens. */
.conversation{position:relative}
.clear-chat{position:absolute;top:6px;right:10px;z-index:3;height:28px;padding:0 12px;border:1px solid var(--n-200);border-radius:999px;background:var(--n-0);color:var(--n-600);font-size:var(--fs-xs);box-shadow:var(--shadow-sm);cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.clear-chat:not([hidden]){display:inline-flex;align-items:center}
.clear-chat:hover{border-color:var(--n-300);color:var(--n-800)}
.clear-chat.armed{background:var(--r-50);border-color:var(--r-300);color:var(--r-700)}
.strategy-restored{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;padding:10px 14px;border:1px solid var(--a-200);border-radius:var(--radius-md);background:var(--a-50);color:var(--a-800);font-size:var(--fs-sm)}
.strategy-restored button{height:28px;padding:0 12px;border:1px solid var(--a-300);border-radius:var(--radius-sm);background:var(--n-0);color:var(--a-800);font-size:var(--fs-xs);cursor:pointer}
.strategy-restored button:hover{background:var(--a-100)}

/* One content column in the chat: avatars sit in a fixed gutter, and bubbles, cards and the composer share the same left and right edges. */
html #appShell .conversation{--chat-gutter:92px}
html #appShell .conversation>.composer-area{width:auto;max-width:none;margin-left:var(--chat-gutter)!important;margin-right:4px!important}
@media(max-width:760px){html #appShell .conversation{--chat-gutter:78px}}
@media(max-width:580px){html #appShell .conversation>.composer-area{margin-left:0!important;margin-right:0!important}}

/* The composer floats above the chat: a visible edge, a soft upward shadow, and messages fade out before they reach it. */
html #appShell .conversation>.composer-area{box-shadow:0 0 0 1px var(--n-200),0 -10px 28px -12px rgb(15 23 42 / .18),0 18px 44px rgb(15 23 42 / .12)!important}
html[data-theme=dark] #appShell .conversation>.composer-area{box-shadow:0 0 0 1px var(--n-300),0 -12px 32px -12px rgb(0 0 0 / .55),0 18px 44px rgb(0 0 0 / .4)!important}
html #appShell .conversation>.messages{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent)}