/* ============================================================================ * message-tags.css — the `/` and `@` picker and the tag chips. * Shared by messages.html and the Messages panel on patient-view.html so the two * screens cannot drift. Every selector is prefixed `mt-` and none of them exists * anywhere else in the app. * ========================================================================== */ /* The picker is appended to and positioned in script, so it escapes any overflow:hidden card it is opened inside. z-index clears the app's modals, which sit at 9999999999 on several screens. */ .mt-menu { position: absolute; z-index: 10000000000; background: #fff; border: 1px solid #e2e6ef; border-radius: 10px; box-shadow: 0 12px 34px rgba(16, 24, 64, .16); overflow-y: auto; overflow-x: hidden; font-size: 13px; padding: 4px; } .mt-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; cursor: pointer; } .mt-item.on, .mt-item:hover { background: #eef3fb; } .mt-tx { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .mt-tx b { font-weight: 600; color: #1b2559; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mt-sub { font-size: 11px; color: #6b7390; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mt-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 3px 7px; border-radius: 20px; background: #eef0f7; color: #41496b; } .mt-empty { padding: 10px 12px; color: #6b7390; font-size: 12px; } /* One hue per kind, carried by BOTH the picker badge and the chip, so the colour means the same thing while writing and while reading. The kind is also spelled out in words in the picker and in the chip's title, so the colour is never the only carrier. */ .mt-ip { background: #e7f1fd; color: #14539a; } .mt-umr { background: #edeaf9; color: #4632a3; } .mt-bill { background: #fdf0e3; color: #8a4b09; } .mt-user { background: #e4f4ec; color: #10613c; } .mt-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; margin: 0 6px 6px 0; background: #eef0f7; color: #41496b; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mt-chip i { font-size: 11px; opacity: .8; } .mt-chips { display: flex; flex-wrap: wrap; margin-top: 8px; } .mt-chips:empty { display: none; } /* The one-line hint under a composer. Deliberately always visible rather than a tooltip: a feature you only find by typing a character nobody told you about is a feature nobody uses. */ .mt-hint { font-size: 11px; color: #6b7390; margin-top: 6px; } .mt-hint kbd { background: #eef0f7; border: 1px solid #dfe3ee; border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; font-family: inherit; font-size: 11px; font-weight: 700; color: #41496b; } /* ============================================================================ * THE THREAD READER * Used by the right-hand panel on messages.html AND by the Messages card on * patient-view.html — one conversation looks the same wherever it is read, which * is the point of putting it here rather than in either page. * ========================================================================== */ .mt-thread { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 8px; overflow-y: auto; } .mt-bubble { border: 1px solid #e6e9f2; border-left: 3px solid #c8d2e8; border-radius: 10px; background: #fff; padding: 10px 12px; } /* The sender's own messages are tinted AND labelled "(you)" in the header, so the distinction does not rest on colour alone. */ .mt-bubble.mine { background: #f5f8fd; border-left-color: #2a78d6; } .mt-bubble-h { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #41496b; margin-bottom: 6px; } .mt-bubble-h b { font-weight: 600; } .mt-bubble-t { margin-left: auto; font-size: 11px; color: #8b91a8; white-space: nowrap; } /* pre-wrap, not
substitution: the body is escaped before it reaches the DOM, so line breaks have to survive as whitespace rather than as markup. */ .mt-bubble-b { font-size: 13px; color: #202542; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .mt-bubble-to { font-size: 11px; color: #8b91a8; margin-top: 6px; } .mt-av { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #2b4c7e; color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .mt-reply { border-top: 1px solid #eef0f7; padding-top: 12px; margin-top: 12px; } .mt-reply textarea { width: 100%; border: 1px solid #dfe3ee; border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 13px; resize: vertical; min-height: 68px; } .mt-reply textarea:focus { outline: 0; border-color: #2a78d6; box-shadow: 0 0 0 3px rgba(42, 120, 214, .12); } .mt-reply-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .mt-reply-foot .mt-hint { margin: 0; flex: 1 1 200px; } .mt-empty-state { text-align: center; color: #8b91a8; font-size: 13px; padding: 22px 12px; } .mt-empty-state i { display: block; font-size: 22px; margin-bottom: 8px; opacity: .55; } @media (max-width: 600px) { .mt-menu { width: calc(100vw - 24px) !important; left: 12px !important; } }