/* Canary-only compatibility fixes. Legacy staff styles remain untouched. */
.chat-window .chat-select-button[data-expandable="1"] {
	padding-top: 24px;
}

.chat-window .chat-select-button[data-expandable="1"] .chat-expand-button {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	left: 2px;
	right: 2px;
	height: 18px;
	min-height: 18px;
	white-space: nowrap;
}

.chat-window .chat-select-button[data-expandable="1"] .chat-expand-button a {
	flex: none;
	margin: 0 2px;
}

.chat-window .chat-message-edited {
	color: #666;
	font-size: 0.82em;
	font-style: italic;
	margin-top: 2px;
	text-align: right;
}

.chat-window .chat-message-edited:empty {
	display: none;
}

.chat-window .chat-history-loader {
	clear: both;
	padding: 6px 0 10px;
	text-align: center;
}

.chat-window .chat-history-loader button {
	background: #f3f3f3;
	border: 1px solid #aaa;
	border-radius: 4px;
	color: #333;
	cursor: pointer;
	font: inherit;
	padding: 5px 10px;
}

.chat-window .chat-history-loader button:hover {
    background: #e8e8e8;
}

.chat-window .chat-load-more {
    text-align: center;
    font-size: 0.9em;
}

.chat-window .chat-load-more a {
    color: #555;
}

/* Overlay above the composer: preserve the fixed-height legacy cabinet form. */
.chat-window .chat-form form {
    position: relative;
}

.chat-window .chat-clipboard-preview {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 200px;
    overflow: auto;
    padding: 8px;
    background: #fff;
    color: #333;
    border: 1px solid #bbb;
    border-radius: 4px;
    box-shadow: 0 -2px 8px #0002;
}

.chat-window .chat-clipboard-status {
    font-size: 13px;
    margin-bottom: 6px;
}

.chat-window .chat-clipboard-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 4px;
}

.chat-window .chat-clipboard-item img {
    max-width: 140px;
    height: 100px;
    object-fit: contain;
}

.chat-window .chat-clipboard-item button {
    cursor: pointer;
    color: #333;
    background: #f4f4f4;
    border: 1px solid #bbb;
    padding: 3px 8px;
}
/* Isolate new controls from cabinet-wide button rules and the legacy horizontal
   chat row. In particular, flex children must be allowed to shrink. */
.chat-window .chat-conversation-tools,
.chat-window .chat-conversation-view,
.chat-window .chat-conversation-row {
    box-sizing: border-box; min-width: 0; max-width: 100%;
}
.chat-window .chat-conversation-tools {
    display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; width: 100%;
}
.chat-window .chat-select-button[data-conversation-tools] { flex-wrap: wrap; }
.chat-window .chat-select-button[data-conversation-tools] > a {
    flex: 1 1 80px; min-width: 0; overflow-wrap: anywhere; white-space: normal;
}
.chat-window .chat-select-button[data-conversation-tools] > .user-picture { flex: 0 0 46px; }
.chat-window .chat-department-tools { flex: 0 0 100%; clear: both; }
.chat-window .chat-conversation-tools button,
.chat-window .chat-conversation-view button {
    box-sizing: border-box; position: static; float: none; display: block;
    width: auto; min-width: 0; max-width: 100%; height: auto; min-height: 32px;
    margin: 0; padding: 6px 8px; font: inherit; font-size: 13px; line-height: 1.35;
    white-space: normal; overflow-wrap: anywhere; word-break: normal;
    text-indent: 0; text-transform: none; text-align: center; cursor: pointer;
    color: #24517b; border: 1px solid #ccd6df; border-radius: 4px;
    background: #f5f8fb; box-shadow: none;
}
.chat-window .chat-conversation-tools button { flex: 1 1 65px; }
.chat-window .chat-conversation-tools .chat-conversation-refresh {
    flex: 0 0 32px; width: 32px; padding: 2px; font-size: 20px;
}
.chat-window .chat-conversation-tools button:hover,
.chat-window .chat-conversation-view button:hover { background: #e5eef7; }
.chat-window .chat-conversation-tools button:focus-visible,
.chat-window .chat-conversation-view button:focus-visible { outline: 2px solid #24517b; outline-offset: -2px; }
.chat-window .chat-archive-notice {
    flex: 0 0 100%; margin: 0; font-size: 12px; color: #334455; overflow-wrap: anywhere;
}
.chat-window .chat-archive-notice:empty { display: none; }
.chat-window .chat-conversation-view {
    width: 100%; padding: 8px; border: 1px solid #aebecd; background: #fff;
    color: #243646; max-height: 60vh; overflow-y: auto; overflow-x: hidden;
}
.chat-window .chat-conversation-view strong {
    display: block; margin-bottom: 6px; white-space: normal; overflow-wrap: anywhere;
}
.chat-window .chat-conversation-view p { margin: 6px 0; overflow-wrap: anywhere; }
.chat-window .chat-conversation-row {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
    margin: 0; padding: 0; border-bottom: 1px solid #e0e6ec;
}
.chat-window .chat-conversation-row .chat-conversation-open {
    width: 100%; text-align: left; border: 0; border-radius: 0;
    background: transparent; padding: 8px 4px;
}
.chat-window .chat-conversation-row .chat-conversation-open:hover { background: #e5eef7; }
.chat-window .chat-conversation-row .chat-conversation-open[aria-current="true"] {
    background: #e5eef7; box-shadow: inset 3px 0 #24517b;
}
.chat-window .chat-conversation-label {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; overflow-wrap: anywhere;
}
.chat-window .chat-conversation-unread {
    display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 8px;
    background: #24517b; color: #fff; font-size: 12px;
}
.chat-window .chat-conversation-tools button:disabled,
.chat-window .chat-conversation-view button:disabled { opacity: .6; cursor: default; }
.chat-window .chat-archive-menu > a {
    display: block; flex: 1 1 auto; min-width: 0; margin-right: 0;
    white-space: normal; overflow-wrap: anywhere;
}
/* Reserve real space above history, rather than overlaying messages or the
   composer. Only panels with the new header opt into this layout. */
.chat-window #chat-panel[data-conversation-header] {
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.chat-window #chat-panel[data-conversation-header] > .chat-box {
    flex: 1 1 0; min-height: 0; height: auto;
}
.chat-window #chat-panel[data-conversation-header] > .chat-form { flex: 0 0 auto; }
.chat-window .chat-conversation-header {
    flex: 0 0 auto; align-items: center; padding: 6px 8px;
    background: #f5f8fb; border-bottom: 1px solid #d6e0e8;
}
.chat-window .chat-conversation-header[hidden] { display: none; }
.chat-window .chat-conversation-heading {
    flex: 1 1 100px; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: #334455; font-size: 13px;
}
.chat-window .chat-conversation-header button { flex: 0 1 auto; }
.chat-window [data-waiting-answer="1"] { border-left: 3px solid #c87913; }
.chat-window [data-archive-preview="1"] { display: none !important; }