/* Approved Graphite direction. Use the account palette, including the light theme.
   Desktop geometry stays separate from the browser's narrow-screen navigation. */
body.workspace-design.graphite-interface {
    --ui-radius: 10px;
    --ui-focus: var(--accent);
    --ui-hover: var(--panel-soft);
    font-family: "Segoe UI", sans-serif;
}
.interface-icon { display:inline-block; vertical-align:middle; flex-shrink:0; pointer-events:none; }
body.workspace-design.graphite-interface[data-appearance] :is(.stage,.channel-text,.community-friends,.channel-history,.dm-history) {
    background:var(--bg); color:var(--text);
}
body.workspace-design.graphite-interface[data-appearance] :is(.channel-panel,.camera-chat-rail,.community-friends>aside,.workspace-user,.settings-nav) {
    background:var(--panel); border-color:var(--line); color:var(--text);
}
body.workspace-design.graphite-interface[data-appearance] :is(.server-rail,.call-dock) {
    background:var(--bg); border-color:var(--line);
}
body.workspace-design.graphite-interface[data-appearance] :is(.stage-header,.channel-text-header,.dm-heading,.community-friends>header) {
    background:var(--bg); border-color:var(--line);
}
body.workspace-design.graphite-interface[data-appearance] :is(.channel-row,.friend-row,.settings-nav button,.extracted-channel .link__972a0) {
    background:transparent; color:var(--muted); border-radius:8px;
}
body.workspace-design.graphite-interface[data-appearance] :is(.channel-row,.friend-row,.settings-nav button,.extracted-channel .link__972a0):hover {
    background:var(--panel-soft); color:var(--text);
}
body.workspace-design.graphite-interface[data-appearance] :is(.channel-row.selected,.friend-row.selected,.settings-nav button.selected,.extracted-channel .interactiveSelected__972a0) {
    background:var(--panel-soft); color:var(--text); border-radius:8px; box-shadow:inset 3px 0 var(--accent);
}
body.workspace-design.graphite-interface[data-appearance] .extracted-channel .interactiveSelected__972a0 a { color:var(--text); }
body.workspace-design.graphite-interface[data-appearance] .channel-person.is-speaking {
    background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--accent);
}
body.workspace-design.graphite-interface[data-appearance] .channel-person.is-speaking .channel-person-avatar { outline-color:var(--accent); }
body.workspace-design.graphite-interface[data-appearance] :is(.channel-text-header,.stage-header) { min-height:62px; }
body.workspace-design.graphite-interface[data-appearance] .server-icon {
    background:var(--panel); border:1px solid transparent; border-radius:15px; color:var(--muted);
}
body.workspace-design.graphite-interface[data-appearance] .server-icon.selected {
    background:var(--panel-soft); border-color:var(--accent); color:var(--text);
}
body.workspace-design.graphite-interface .server-icon.selected:before { background:var(--accent); }
body.workspace-design.graphite-interface .server-rail { border-right:1px solid var(--line); }
body.workspace-design.graphite-interface .channel-panel { border-right:1px solid var(--line); }
body.workspace-design.graphite-interface .channel-list summary { font-size:11px; letter-spacing:.45px; padding:10px 8px; }
body.workspace-design.graphite-interface .channel-list details { margin-bottom:24px; }
body.workspace-design.graphite-interface .message-avatar { border-radius:50%; overflow:hidden; }
body.workspace-design.graphite-interface[data-appearance] .channel-message :is(p,.formatted-message) { color:var(--text); }
body.workspace-design.graphite-interface[data-appearance] :is(.channel-message time,.friend-row small) { color:var(--muted); font-size:11px; }
body.workspace-design.graphite-interface[data-appearance] :is(.channel-message,.dm-history article):hover {
    background:color-mix(in srgb,var(--panel) 65%,transparent);
}
body.workspace-design.graphite-interface[data-appearance] :is(.message-toolbar,.workspace-context-menu) {
    background:var(--panel); border:1px solid var(--line); box-shadow:0 8px 24px #0003;
}
body.workspace-design.graphite-interface[data-appearance] :is(.message-reactions button,.channel-attachment,.dm-attachment) {
    background:var(--panel); border-color:var(--line); color:var(--text); border-radius:10px;
}
body.workspace-design.graphite-interface[data-appearance] .message-reactions button.mine { border-color:var(--accent); }
body.workspace-design.graphite-interface .friend-avatar { width:38px; height:38px; }
body.workspace-design.graphite-interface .friend-row { min-height:64px; padding:10px 12px; }
body.workspace-design.graphite-interface .friend-row strong { font-size:14px; font-weight:600; }
body.workspace-design.graphite-interface .dm-status:empty { display:none; }
body.workspace-design.graphite-interface .contacts-heading { font-size:16px; font-weight:600; color:var(--text); margin:0 0 22px; }

/* One shared composer: attachment, message, formatting, emoji, send.
   Status/error and draft-conflict controls keep their own full-width rows. */
body.workspace-design.graphite-interface .graphite-composer {
    display:flex; flex-wrap:wrap; align-items:center; gap:6px;
    margin:8px 20px 16px; padding:6px 10px;
    border:1px solid var(--line); border-radius:12px;
    background:var(--panel); min-width:0;
}
body.workspace-design.graphite-interface .graphite-composer:focus-within { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); }
body.workspace-design.graphite-interface .graphite-composer>textarea {
    order:2; flex:1 1 120px; min-width:0; margin:0; padding:12px 8px;
    min-height:46px; max-height:160px; border:0; border-radius:6px;
    background:transparent; color:var(--text); font:inherit; line-height:1.5;
}
body.workspace-design.graphite-interface .graphite-composer>button {
    order:7; min-height:40px; padding:6px 10px; border:0; background:transparent; color:var(--muted); align-self:center;
}
body.workspace-design.graphite-interface .graphite-composer>button:is(.composer-attach,.composer-format-toggle,.composer-emoji,.composer-send) {
    width:38px; height:40px; padding:7px; flex:0 0 38px; display:grid; place-items:center;
}
body.workspace-design.graphite-interface .graphite-composer>.composer-attach { order:1; }
body.workspace-design.graphite-interface .graphite-composer>.composer-format-toggle { order:3; }
body.workspace-design.graphite-interface .graphite-composer>.composer-emoji { order:4; }
body.workspace-design.graphite-interface .graphite-composer>.composer-send { order:5; color:var(--accent); }
body.workspace-design.graphite-interface .graphite-composer>button:hover:not(:disabled) { background:var(--panel-soft); color:var(--text); }
body.workspace-design.graphite-interface .graphite-composer>.composer-format-toggle[aria-expanded=true] { color:var(--accent); background:var(--panel-soft); }
body.workspace-design.graphite-interface .graphite-composer>.message-reply-bar { order:0; }
body.workspace-design.graphite-interface .graphite-composer>.composer-formatting { order:6; flex-basis:100%; padding:6px 0; border-top:1px solid var(--line); }
body.workspace-design.graphite-interface .graphite-composer>.composer-formatting button { background:transparent; color:var(--muted); min-width:32px; }
body.workspace-design.graphite-interface .graphite-composer>:is(.composer-hint,.draft-sync,.channel-typing,[role=status]) { order:8; flex-basis:100%; font-size:11px; color:var(--muted); }
body.workspace-design.graphite-interface .graphite-composer>:is(.composer-hint,[role=status]):empty { display:none; }
.graphite-composer .composer-formatting[hidden],.graphite-composer>button[hidden] { display:none!important; }

/* Settings share the same navigation rhythm as channels and messages. */
body.workspace-design.graphite-interface[data-appearance] .community-settings {
    background:var(--bg); border:1px solid var(--line); box-shadow:0 24px 100px #0009; border-radius:16px;
}
body.workspace-design.graphite-interface .settings-nav button { display:flex; align-items:center; gap:12px; min-height:44px; font-size:13px; padding:10px 14px; }
body.workspace-design.graphite-interface .settings-nav .interface-icon { width:19px; height:19px; }
body.workspace-design.graphite-interface .settings-nav button span { min-width:0; }
body.workspace-design.graphite-interface .settings-nav { gap:6px; border-right:1px solid var(--line); }
body.workspace-design.graphite-interface[data-appearance] :is(.settings-body,.settings-category) { background:var(--bg); }
body.workspace-design.graphite-interface .settings-category { gap:20px; }
body.workspace-design.graphite-interface .settings-category h2 { font-size:24px; font-weight:600; letter-spacing:-.4px; margin-bottom:12px; }
body.workspace-design.graphite-interface .settings-category>.setting {
    background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px;
}
body.workspace-design.graphite-interface .settings-category>.toggle-row { border-color:var(--line); padding:16px 4px; }
body.workspace-design.graphite-interface .settings-category input[type=range] { accent-color:var(--accent); }
body.workspace-design.graphite-interface[data-appearance] :is(.workspace-user .round-btn,.call-dock .round-btn) {
    background:var(--panel); color:var(--muted); border:1px solid var(--line); border-radius:12px;
}
body.workspace-design.graphite-interface[data-appearance] .call-dock .round-btn.primary:not(:disabled) {
    background:var(--accent); color:var(--bg); border-color:var(--accent);
}
body.workspace-design.graphite-interface[data-appearance] :is(.call-dock .round-btn.danger,.workspace-user .round-btn.muted):not(:disabled) {
    background:#592e38; color:#ffd8df; border-color:#80414e;
}
body.workspace-design.graphite-interface .workspace-user .account-row { gap:8px; }
body.workspace-design.graphite-interface .workspace-account-controls button { min-width:30px; }

@media(min-width:901px) {
    body.workspace-design.graphite-interface:has(.community-friends:not([hidden])) .channel-panel { visibility:hidden; }
    body.workspace-design.graphite-interface .community-friends { grid-template-columns:minmax(0,1fr); }
    body.workspace-design.graphite-interface .community-friends>header { grid-column:1; }
    body.workspace-design.graphite-interface .community-friends>main { grid-column:1; grid-row:2; }
    body.workspace-design.graphite-interface .community-friends>aside {
        position:fixed; top:0; left:var(--graphite-sidebar-left); bottom:var(--graphite-user-height);
        width:var(--graphite-sidebar-width); box-sizing:border-box; z-index:6;
    }
    body.workspace-design.graphite-interface .channel-history { padding:24px 26px 8px; }
    body.workspace-design.graphite-interface .channel-text { grid-template-rows:62px minmax(0,1fr) auto; }
    body.workspace-design.graphite-interface .community-friends>header { padding:14px 22px; }
    body.workspace-design.graphite-interface .community-friends>aside { padding:18px 12px; border-right:1px solid var(--line); }
    body.workspace-design.graphite-interface .dm-heading { padding:18px 22px; }
    body.workspace-design.graphite-interface .server-actions { gap:6px; padding:14px 10px 4px; }
    body.workspace-design.graphite-interface .server-actions button { min-height:32px; border-color:var(--line); color:var(--muted); }
}
@media(max-width:900px) {
    body.workspace-design.graphite-interface .graphite-composer { margin:6px; padding:4px; gap:2px; }
    body.workspace-design.graphite-interface .graphite-composer>textarea { font-size:16px; flex-basis:70px; padding:10px 4px; }
    body.workspace-design.graphite-interface .graphite-composer>.composer-format-toggle { display:none; }
    body.workspace-design.graphite-interface .graphite-composer>button:is(.composer-attach,.composer-emoji,.composer-send) { width:32px; flex-basis:32px; padding:5px; }
    body.workspace-design.graphite-interface .settings-category>.setting { padding:14px; }
}
@media(prefers-reduced-motion:reduce) {
    body.workspace-design.graphite-interface :is(button,.channel-person,.server-icon) { transition:none; }
}