agentchannel 0.8.1 → 0.9.1

package/ui/style.css

@@ -1,110 +1,156 @@
 *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
 
-/* Ghostty-inspired dark theme */
+/* Dark theme (default) — inspired by Linear's dark-native approach */
 :root {
-  --bg: #0e1117;
-  --bg-alt: #1a1f2b;
-  --bg-sidebar: #060810;
-  --bg-bubble: #131620;
-  --bg-bubble-self: #1a1e2a;
-  --bg-hover: rgba(255,255,255,0.03);
-  --text: #e8ecf2;
-  --text-secondary: #b8c0d0;
-  --text-muted: #606878;
-  --text-sidebar: #7a8494;
-  --text-sidebar-active: #cdd6e4;
-  --mention-bg: rgba(255,140,50,0.12);
-  --mention-text: #ff8c32;
-  --border: #1c2030;
-  --accent: #00e676;
-  --sidebar-active: #1c2030;
+  --bg: #0a0b0f;
+  --bg-alt: #14161e;
+  --bg-sidebar: #060608;
+  --bg-bubble: #111318;
+  --bg-bubble-self: #181a22;
+  --bg-hover: rgba(255,255,255,0.04);
+  --text: #f0f1f3;
+  --text-secondary: #a0a8b8;
+  --text-body: #bcc3d0;
+  --text-muted: #555d6e;
+  --text-sidebar: #6b7585;
+  --text-sidebar-active: #d0d5de;
+  --mention-bg: rgba(0,200,88,0.08);
+  --mention-text: #00c858;
+  --border: rgba(255,255,255,0.06);
+  --accent: #00c858;
+  --accent-brand: #00c858;
+  --accent-brand-bg: rgba(0,200,88,0.18);
+  --sidebar-active: rgba(255,255,255,0.06);
+  --tag: #7a8da8;
+  --tag-bg: rgba(100,130,180,0.06);
+  --icon-btn-bg: rgba(255,255,255,0.08);
+  --icon-btn-border: rgba(255,255,255,0.12);
+  --icon-btn-hover: rgba(255,255,255,0.16);
+  --scrollbar: rgba(255,255,255,0.06);
   --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
 }
 
-/* Light mode — follows system preference */
+/* Light mode — warm Notion-inspired neutrals */
 @media (prefers-color-scheme: light) {
   :root:not(.dark) {
-    --bg: #ffffff; --bg-alt: #f7f7f8; --bg-sidebar: #f7f7f8;
-    --bg-bubble: #f7f7f8; --bg-bubble-self: #ececf1;
-    --bg-hover: rgba(0,0,0,0.02);
-    --text: #0d0d0d; --text-secondary: #6b6c7b; --text-muted: #acacbe;
-    --text-sidebar: #6b6c7b; --text-sidebar-active: #0d0d0d;
-    --mention-bg: rgba(59,130,246,0.08); --mention-text: #2563eb;
-    --border: #e5e5e5; --accent: #0d0d0d; --sidebar-active: #ececf1;
+    --bg: #fefefe; --bg-alt: #f5f3ef; --bg-sidebar: #f7f5f2;
+    --bg-bubble: #f5f3ef; --bg-bubble-self: #edeae5;
+    --bg-hover: rgba(0,0,0,0.03);
+    --text: rgba(0,0,0,0.88); --text-body: rgba(0,0,0,0.65); --text-secondary: rgba(0,0,0,0.55); --text-muted: rgba(0,0,0,0.35);
+    --text-sidebar: rgba(0,0,0,0.50); --text-sidebar-active: rgba(0,0,0,0.85);
+    --mention-bg: rgba(0,200,88,0.06); --mention-text: #1a7a42;
+    --border: rgba(0,0,0,0.08); --accent: rgba(0,0,0,0.85); --accent-brand: #00c858;
+    --accent-brand-bg: rgba(0,200,88,0.08);
+    --sidebar-active: rgba(0,0,0,0.05);
+    --tag: rgba(0,0,0,0.40); --tag-bg: rgba(0,0,0,0.04);
+    --icon-btn-bg: rgba(0,0,0,0.04); --icon-btn-border: rgba(0,0,0,0.08);
+    --icon-btn-hover: rgba(0,0,0,0.08);
+    --scrollbar: rgba(0,0,0,0.08);
   }
 }
 /* Manual dark override */
 :root.dark {
-  --bg: #0e1117; --bg-alt: #1a1f2b; --bg-sidebar: #060810;
-  --bg-bubble: #131620; --bg-bubble-self: #1a1e2a;
-  --bg-hover: rgba(255,255,255,0.03);
-  --text: #e8ecf2; --text-secondary: #b8c0d0; --text-muted: #606878;
-  --text-sidebar: #8a94a4; --text-sidebar-active: #e8ecf2;
-  --mention-bg: rgba(255,140,50,0.12); --mention-text: #ff8c32;
-  --border: #1c2030; --accent: #00e676; --sidebar-active: #1c2030;
+  --bg: #0a0b0f; --bg-alt: #14161e; --bg-sidebar: #060608;
+  --bg-bubble: #111318; --bg-bubble-self: #181a22;
+  --bg-hover: rgba(255,255,255,0.04);
+  --text: #f0f1f3; --text-body: #bcc3d0; --text-secondary: #a0a8b8; --text-muted: #555d6e;
+  --text-sidebar: #6b7585; --text-sidebar-active: #d0d5de;
+  --mention-bg: rgba(0,200,88,0.08); --mention-text: #00c858;
+  --border: rgba(255,255,255,0.06); --accent: #00c858; --accent-brand: #00c858;
+  --accent-brand-bg: rgba(0,200,88,0.18);
+  --sidebar-active: rgba(255,255,255,0.06);
+  --tag: #7a8da8; --tag-bg: rgba(100,130,180,0.06);
+  --icon-btn-bg: rgba(255,255,255,0.08); --icon-btn-border: rgba(255,255,255,0.12);
+  --icon-btn-hover: rgba(255,255,255,0.16);
+  --scrollbar: rgba(255,255,255,0.06);
 }
 /* Manual light override */
 :root.light {
-  --bg: #ffffff; --bg-alt: #f7f7f8; --bg-sidebar: #f7f7f8;
-  --bg-bubble: #f7f7f8; --bg-bubble-self: #ececf1;
-  --bg-hover: rgba(0,0,0,0.02);
-  --text: #0d0d0d; --text-secondary: #6b6c7b; --text-muted: #acacbe;
-  --text-sidebar: #6b6c7b; --text-sidebar-active: #0d0d0d;
-  --mention-bg: rgba(59,130,246,0.08); --mention-text: #2563eb;
-  --border: #e5e5e5; --accent: #0d0d0d; --sidebar-active: #ececf1;
+  --bg: #fefefe; --bg-alt: #f5f3ef; --bg-sidebar: #f7f5f2;
+  --bg-bubble: #f5f3ef; --bg-bubble-self: #edeae5;
+  --bg-hover: rgba(0,0,0,0.03);
+  --text: rgba(0,0,0,0.88); --text-body: rgba(0,0,0,0.65); --text-secondary: rgba(0,0,0,0.55); --text-muted: rgba(0,0,0,0.35);
+  --text-sidebar: rgba(0,0,0,0.50); --text-sidebar-active: rgba(0,0,0,0.85);
+  --mention-bg: rgba(0,200,88,0.06); --mention-text: #1a7a42;
+  --border: rgba(0,0,0,0.08); --accent: rgba(0,0,0,0.85); --accent-brand: #00c858;
+  --accent-brand-bg: rgba(0,200,88,0.08);
+  --sidebar-active: rgba(0,0,0,0.05);
+  --tag: rgba(0,0,0,0.40); --tag-bg: rgba(0,0,0,0.04);
+  --icon-btn-bg: rgba(0,0,0,0.04); --icon-btn-border: rgba(0,0,0,0.08);
+  --icon-btn-hover: rgba(0,0,0,0.08);
+  --scrollbar: rgba(0,0,0,0.08);
 }
 
 html { font-size: 16px; -webkit-font-smoothing: antialiased; }
+input, textarea, select, button { outline: none; -webkit-appearance: none; }
+input:focus, textarea:focus { border-color: var(--accent) !important; }
 body { font-family: var(--font); background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; }
 
-.app { display: flex; height: 100vh; }
+.app { display: flex; height: 100vh; border-top: 1px solid var(--border); }
 
 /* Sidebar */
 .sidebar { width: 260px; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
-.sidebar__header { padding: 20px; display: flex; flex-direction: column; gap: 2px; }
+.sidebar__header { padding: 16px 16px 14px 20px; display: flex; align-items: flex-start; justify-content: space-between; }
+.sidebar__brand-group { display: flex; flex-direction: column; gap: 1px; }
+.sidebar__collapse { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; border-radius: 4px; line-height: 0; }
+.sidebar__collapse:hover { color: var(--text); background: var(--bg-hover); }
 .sidebar__brand { font-size: 1.05rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
 .sidebar__tagline { font-size: 0.7rem; color: var(--text-muted); }
 .sidebar__channels { flex: 1; padding: 0 8px; overflow-y: auto; }
-.sidebar__channel { display: flex; align-items: center; padding: 5px 12px; border-radius: 6px; cursor: pointer; color: var(--text-sidebar); font-size: 0.82rem; transition: all 0.1s; margin-bottom: 0; }
+.sidebar__channel { display: flex; align-items: center; padding: 6px 12px; border-radius: 6px; cursor: pointer; color: var(--text-sidebar); font-size: 0.83rem; transition: all 0.1s; margin-bottom: 1px; }
 .sidebar__channel:hover { background: var(--bg-hover); }
 .sidebar__channel.active { background: var(--sidebar-active); color: var(--text-sidebar-active); font-weight: 600; }
 .sidebar__channel .icon { width: 0; margin-right: 0; }
 .sidebar__channel .badge { margin-left: 4px; background: var(--text-muted); color: var(--bg); font-size: 0.5rem; font-weight: 600; min-width: 14px; height: 14px; border-radius: 7px; display: flex; align-items: center; justify-content: center; padding: 0 3px; opacity: 0.6; }
 .sidebar__group { padding: 12px 12px 4px; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; }
-.sidebar__channel.sub { padding-left: 28px; font-size: 0.78rem; }
+.sidebar__channel.sub { padding-left: 22px; font-size: 0.78rem; }
+.sidebar__create { color: var(--text-muted) !important; margin-top: 10px; }
+.sidebar__create:hover { color: var(--accent) !important; }
 .sidebar__status { padding: 16px 20px; font-size: 0.75rem; color: var(--text-muted); border-top: 1px solid var(--border); }
-.sidebar__status.connected { color: #22c55e; }
-.sidebar__user { display: flex; align-items: center; gap: 8px; padding: 10px 16px; margin-top: auto; border-top: 1px solid var(--border); }
-.sidebar__user.connected { background: rgba(0,230,118,0.35); }
+.sidebar__status.connected { color: var(--accent-brand); }
+.sidebar__user { display: flex; align-items: center; gap: 8px; padding: 10px 16px; margin-top: auto; border-top: 1px solid var(--border); position: relative; overflow: hidden; }
+.sidebar__user.connected { background: var(--accent-brand-bg); }
 .sidebar__user-name { font-size: 0.78rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.sidebar__icon-btn { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); cursor: pointer; color: var(--text); padding: 4px; border-radius: 4px; line-height: 0; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; }
-.sidebar__icon-btn:hover { background: rgba(255,255,255,0.3); }
+/* Connecting progress bar — fills up, then becomes the connected bg */
+.sidebar__progress { position: absolute; bottom: 0; left: 0; right: 0; top: 0; pointer-events: none; }
+.sidebar__progress-bar { position: absolute; bottom: 0; left: 0; top: 0; width: 0; background: var(--accent-brand-bg); animation: progress-fill 3s ease-out forwards; }
+@keyframes progress-fill { 0% { width: 0; } 80% { width: 85%; } 100% { width: 95%; } }
+.sidebar__progress.connected .sidebar__progress-bar { width: 100% !important; animation: none; transition: width 0.3s ease, opacity 1s ease 0.5s; opacity: 0; }
+
+.sidebar__icon-btn { background: transparent; border: 1px solid transparent; cursor: pointer; color: var(--text); padding: 4px; border-radius: 4px; line-height: 0; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; }
+.sidebar__icon-btn:hover { background: var(--icon-btn-bg); border-color: var(--icon-btn-border); }
+
+/* Resize handles */
+.resize-handle { width: 4px; cursor: col-resize; background: transparent; flex-shrink: 0; position: relative; z-index: 10; }
+.resize-handle:hover, .resize-handle.active { background: var(--border); }
 
 /* Main */
 .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-.main__header { padding: 16px 24px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
+.main__header { padding: 16px 24px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 1rem; display: flex; align-items: baseline; gap: 8px; }
 .main__header .channel-name { color: var(--text); }
 .main__header .channel-desc { color: var(--text-muted); font-weight: 400; font-size: 0.85rem; }
+.header__actions { display: flex; align-items: center; gap: 6px; align-self: center; }
+.header__btn { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--icon-btn-border); border-radius: 6px; background: var(--icon-btn-bg); color: var(--text-secondary); font-size: 0.72rem; cursor: pointer; transition: all 0.15s; }
+.header__btn:hover { background: var(--text); color: var(--bg); }
+.header__btn--leave:hover { background: var(--bg-hover); color: var(--text); }
 
 /* Messages */
 .messages { flex: 1; overflow-y: auto; padding: 24px 0 80px; }
 .messages__inner { max-width: 768px; margin: 0 auto; padding: 0 24px; }
 
-.conversation { margin-top: 16px; position: relative; }
-.conversation:first-child { margin-top: 0; }
 .conversation__label { display: flex; align-items: baseline; gap: 5px; margin-bottom: 1px; }
-.conversation__sender { font-weight: 600; font-size: 0.75rem; color: var(--text); }
-.conversation__channel { font-size: 0.65rem; color: var(--text-muted); }
-.conversation__time { font-size: 0.65rem; color: var(--text-muted); }
+.conversation__sender { font-weight: 600; font-size: 0.84rem; color: var(--text); }
+.conversation__channel { font-size: 0.7rem; color: var(--text-muted); }
+.conversation__time { font-size: 0.7rem; color: var(--text-muted); }
 
-.conversation__text { font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary); word-wrap: break-word; font-weight: 400; }
+.conversation__text { font-size: 0.82rem; line-height: 1.55; color: var(--text-body); word-wrap: break-word; font-weight: 400; }
 .conversation__text code { background: var(--bg-alt); padding: 1px 4px; border-radius: 3px; font-size: 0.8rem; font-family: "SF Mono","Fira Code",monospace; }
 .conversation__text pre, .readme-card pre { background: var(--bg-alt); padding: 12px; border-radius: 6px; margin: 6px 0; overflow-x: auto; position: relative; }
 .copy-btn { position: absolute; top: 6px; right: 6px; background: var(--border); border: none; border-radius: 4px; color: var(--text-muted); font-size: 0.65rem; padding: 2px 6px; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
 .copy-btn:hover { color: var(--text); }
 .conversation__text pre:hover .copy-btn, .readme-card pre:hover .copy-btn { opacity: 1; }
-.msg-copy { position: absolute; top: 2px; left: -24px; background: none; border: none; color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity 0.15s; padding: 2px; }
-.msg-copy:hover { color: var(--text); }
+.msg-copy { position: absolute; top: 4px; right: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity 0.15s; padding: 2px 6px; font-size: 0.65rem; }
+.msg-copy:hover { color: var(--text); background: var(--bg-hover); }
 .conversation:hover .msg-copy { opacity: 1; }
 .conversation__text pre code, .readme-card pre code { background: none; padding: 0; font-size: 0.8rem; }
 .conversation__text p { margin: 0 0 4px; }
@@ -119,7 +165,19 @@ body { font-family: var(--font); background: var(--bg); color: var(--text); heig
 .conversation__text--grouped { }
 
 .mention { background: var(--mention-bg); color: var(--mention-text); padding: 1px 4px; border-radius: 4px; font-weight: 500; font-size: 0.875rem; }
-.channel-tag { background: rgba(77,186,135,0.1); color: #4dba87; padding: 1px 4px; border-radius: 4px; font-weight: 500; font-size: inherit; cursor: pointer; }
+.channel-tag { background: var(--mention-bg); color: var(--mention-text); padding: 1px 4px; border-radius: 4px; font-weight: 500; font-size: inherit; cursor: pointer; }
+
+/* Subject */
+.conversation__subject { font-weight: 600; font-size: 0.92rem; color: var(--text); margin-bottom: 2px; line-height: 1.4; }
+
+/* Tags — inline text style */
+.conversation__tags { margin-bottom: 4px; font-size: 0.78rem; }
+.tag { color: var(--tag); font-size: 0.78rem; font-weight: 400; }
+
+/* Message card separation — spacing only, no borders */
+.conversation { margin-top: 2px; position: relative; padding: 8px 14px; border-radius: 8px; }
+.conversation:hover { background: var(--bg-hover); }
+.conversation:first-child { margin-top: 0; }
 
 .system-msg { text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 8px 0; }
 
@@ -130,21 +188,72 @@ body { font-family: var(--font); background: var(--bg); color: var(--text); heig
 .members__header { padding: 16px 16px 8px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; }
 .members__list { flex: 1; padding: 0 8px; overflow-y: auto; }
 .members__item { display: flex; align-items: center; padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; color: var(--text-secondary); gap: 8px; }
-.members__dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
+.members__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-brand); flex-shrink: 0; }
 .members__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .members__role { font-size: 0.6rem; color: var(--text-muted); margin-left: auto; }
 .members__actions { padding: 12px 8px; border-top: 1px solid var(--border); margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
-.members__btn { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: none; border-radius: 6px; background: var(--bg-alt); color: var(--text-secondary); font-size: 0.72rem; cursor: pointer; transition: all 0.15s; }
-.members__btn:hover { background: var(--border); color: var(--text); }
-.members__btn--leave { background: none; color: var(--text-muted); font-size: 0.68rem; }
-.members__btn--leave:hover { color: #ef4444; background: rgba(239,68,68,0.08); }
+.members__btn { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-alt); color: var(--text-secondary); font-size: 0.72rem; cursor: pointer; transition: all 0.15s; }
+.members__btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--icon-btn-border); }
+.members__btn--leave { border: 1px solid var(--border); background: var(--bg-alt); color: var(--text-muted); font-size: 0.68rem; }
+.members__btn--leave:hover { background: var(--border); color: var(--text); }
 
 ::-webkit-scrollbar { width: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.15); border-radius: 3px; }
+::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }
+
+/* Collapse buttons */
+.collapse-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 0.9rem; padding: 6px; border-radius: 6px; line-height: 0; align-self: center; }
+.collapse-btn:hover { color: var(--text); background: var(--bg-hover); }
+.members-toggle { position: relative; }
+.members-badge { position: absolute; top: -4px; right: -6px; min-width: 14px; height: 14px; border-radius: 7px; background: var(--text-muted); color: var(--bg); font-size: 0.5rem; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
+.members-badge:empty { display: none; }
+.members-badge.hidden { display: none; }
+
+/* Collapsed states */
+.sidebar.collapsed { width: 56px; overflow: hidden; }
+.sidebar.collapsed .sidebar__header { padding: 12px 0; justify-content: center; }
+.sidebar.collapsed .sidebar__brand,
+.sidebar.collapsed .sidebar__tagline,
+.sidebar.collapsed .sidebar__channels,
+.sidebar.collapsed #update-banner { display: none !important; }
+.sidebar.collapsed .sidebar__collapse { display: none; }
+.sidebar__collapse-open { display: none; }
+.sidebar.collapsed .sidebar__collapse-open { display: flex; }
+.sidebar.collapsed .sidebar__collapse-open { display: flex; justify-content: center; background: none; border: none; padding: 0; margin: 4px 0 0; }
+.sidebar.collapsed .sidebar__user { flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; background: none !important; }
+.sidebar.collapsed .sidebar__user span[style*="flex:1"] { display: none; }
+.sidebar.collapsed .sidebar__user-name { display: none; }
+.sidebar.collapsed .sidebar__user-initial { display: flex; }
+.sidebar__user-initial { display: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-brand-bg); color: var(--text); font-size: 0.72rem; font-weight: 600; align-items: center; justify-content: center; flex-shrink: 0; }
+.members.collapsed { width: 0; overflow: hidden; border: none; }
+.sidebar, .members { transition: width 0.15s ease; }
+
+/* Switch toggle (slider) */
+.switch { position: relative; display: inline-block; width: 32px; height: 18px; flex-shrink: 0; }
+.switch input { opacity: 0; width: 0; height: 0; }
+.switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--border); border-radius: 18px; transition: 0.2s; }
+.switch .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background: var(--text-muted); border-radius: 50%; transition: 0.2s; }
+.switch input:checked + .slider { background: var(--accent-brand); }
+.switch input:checked + .slider:before { transform: translateX(14px); background: #fff; }
+
+/* Channel row action icons — hidden by default, visible on hover */
+.sidebar__channel-actions .sync-toggle,
+.sidebar__channel-actions .sidebar__arrow { opacity: 0; transition: opacity 0.15s; }
+.sidebar__channel:hover .sidebar__channel-actions .sync-toggle,
+.sidebar__channel:hover .sidebar__channel-actions .sidebar__arrow { opacity: 0.6; }
+.sidebar__channel:hover .sidebar__channel-actions .sync-toggle:hover,
+.sidebar__channel:hover .sidebar__channel-actions .sidebar__arrow:hover { opacity: 1; }
+/* Sync ON always shows a subtle indicator */
+.sync-toggle[data-synced="1"] { opacity: 0.25 !important; }
+.sidebar__channel:hover .sync-toggle[data-synced="1"] { opacity: 0.6 !important; }
+.sidebar__channel:hover .sync-toggle[data-synced="1"]:hover { opacity: 1 !important; }
+
+/* Retracted messages */
+.retracted { text-decoration: line-through; opacity: 0.4; }
+.retracted-label { font-size: 0.7rem; color: var(--text-muted); font-style: italic; margin-right: 4px; }
 
 @media (max-width: 700px) {
-  .sidebar { width: 0; display: none; }
-  .members { width: 0; display: none; }
+  .sidebar { width: 0; overflow: hidden; border: none; }
+  .members { width: 0; overflow: hidden; border: none; }
   .messages__inner { padding: 0 16px; }
 }