/* Шапка: название слева, таймер по центру, сотрудник справа */
#header { display: flex; align-items: center; gap: 16px; }
#branding { order: 1; }
#tr-timer { order: 2; flex: 1; text-align: center; font-size: 1.6rem; font-variant-numeric: tabular-nums;
            color: var(--header-link-color); letter-spacing: 1px; }
#tr-timer.tr-last { color: #ff8a80; }
#user-tools { order: 3; margin-left: auto; }
.tr-user { display: flex; align-items: center; gap: 10px; }
.tr-avatar { width: 28px; height: 28px; border-radius: 50%; }

/* Чат справа */
body.tr-on #container { margin-right: 380px; width: auto; min-width: 0; }
#tr-chat { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; display: flex; flex-direction: column;
           background: var(--darkened-bg); border-left: 1px solid var(--hairline-color); z-index: 1000; }
.tr-chat-head { padding: 14px 16px; font-weight: 600; background: var(--header-bg); color: var(--header-color); }
.tr-chat-body { padding: 14px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.tr-meta { font-size: 12px; color: var(--body-quiet-color); }
.tr-msg { padding: 10px 12px; border-radius: 10px; line-height: 1.45; background: var(--body-bg);
          border: 1px solid var(--hairline-color); }
.tr-task { border-left: 3px solid var(--primary); }
.tr-mine { align-self: flex-end; background: var(--selected-row); }
.tr-options { display: flex; flex-direction: column; gap: 8px; }
.tr-option { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; cursor: pointer;
             background: var(--body-bg); border: 1px solid var(--hairline-color); }
.tr-option:hover { border-color: var(--primary); }
.tr-btn { padding: 10px 14px; border: 0; border-radius: 8px; cursor: pointer; background: var(--button-bg);
          color: var(--button-fg); font-weight: 600; width: 100%; }
.tr-btn:hover { background: var(--button-hover-bg); }