diff --git a/css/base.css b/css/base.css index d85c7a4d..10c53fcd 100644 --- a/css/base.css +++ b/css/base.css @@ -284,6 +284,1279 @@ --clr-dk-fg-15: var(--clr-dk-bg-15); } +/* Android workplace and office collaboration. */ +#sidepanel.workplace-collaboration-panel { + width: 100%; + min-width: 0; + flex: 1 1 auto; + color-scheme: light; + background: #f4f5f7; +} + +.workplace-collaboration-panel * { + box-sizing: border-box; + letter-spacing: 0; +} + +.workplace-page { + display: flex; + position: relative; + width: 100%; + min-height: 100%; + overflow: hidden; + color: #242930; + background: #f4f5f7; + flex-direction: column; +} + +.workplace-page button, +.workplace-page input, +.workplace-page textarea { + font: inherit; + letter-spacing: 0; +} + +.workplace-page button { + text-transform: none; +} + +.workplace-page > main { + min-height: 0; + overflow-y: auto; + flex: 1 1 auto; +} + +.workplace-header { + display: grid; + grid-template-columns: 3.6rem minmax(0, 1fr) 3.6rem; + align-items: center; + min-height: 4.4rem; + padding-top: env(safe-area-inset-top); + border-bottom: 1px solid #e6e8eb; + background: #fff; + flex: none; +} + +.workplace-header h1 { + min-width: 0; + margin: 0; + overflow: hidden; + font-size: 1.15rem; + font-weight: 650; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; +} + +.workplace-header button { + display: grid; + place-items: center; + width: 3.6rem; + min-width: 3.6rem; + height: 3.6rem; + min-height: 3.6rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #242930; + background: transparent; +} + +.workplace-header button:last-child { + color: #246fce; +} + +.workplace-header .material-icons { + font-size: 1.6rem; +} + +.workplace-toast { + position: fixed; + z-index: 80; + bottom: max(1.5rem, env(safe-area-inset-bottom)); + left: 50%; + max-width: calc(100% - 2rem); + padding: 0.7rem 1rem; + border-radius: 0.3rem; + color: #fff; + background: rgba(29,33,39,0.94); + text-align: center; + transform: translateX(-50%); +} + +.workbench-page { + background: #fff; +} + +.workbench-page > main { + padding: max(1.4rem, env(safe-area-inset-top)) 1.1rem 1.5rem; +} + +.workbench-profile { + display: grid; + grid-template-columns: 3.4rem minmax(0, 1fr) 3rem; + align-items: center; + gap: 0.75rem; + min-height: 4.8rem; +} + +.workbench-profile img { + width: 3.4rem; + height: 3.4rem; + border-radius: 0.45rem; + object-fit: cover; +} + +.workbench-profile span, +.workbench-profile strong, +.workbench-profile small { + display: block; + min-width: 0; +} + +.workbench-profile strong { + overflow: hidden; + font-size: 1.25rem; + text-overflow: ellipsis; + white-space: nowrap; +} + +.workbench-profile small { + margin-top: 0.25rem; + color: #767e88; +} + +.workbench-profile button { + display: grid; + place-items: center; + width: 3rem; + min-width: 3rem; + height: 3rem; + min-height: 3rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #6c737c; + background: transparent; +} + +.workbench-banner { + display: grid; + grid-template-columns: minmax(0, 1fr) 5.5rem; + align-items: center; + min-height: 9.5rem; + margin: 1.25rem 0 1.6rem; + padding: 1.35rem; + overflow: hidden; + border-radius: 0.5rem; + color: #fff; + background: #3d7ce5; +} + +.workbench-banner strong, +.workbench-banner small { + display: block; +} + +.workbench-banner strong { + max-width: 13rem; + font-size: 1.35rem; + line-height: 1.45; +} + +.workbench-banner small { + margin-top: 0.8rem; + color: rgba(255,255,255,0.85); +} + +.workbench-banner > .material-icons { + color: #d9e7ff; + font-size: 5rem; +} + +.workbench-apps { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 1.4rem 0.7rem; +} + +.workbench-apps button { + display: flex; + align-items: center; + width: 100%; + min-width: 0; + min-height: 5.8rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #30353c; + background: transparent; + flex-direction: column; +} + +.workbench-apps button > span { + display: grid; + position: relative; + place-items: center; + width: 3.7rem; + height: 3.7rem; + border-radius: 0.7rem; + color: #fff; +} + +.workbench-apps span.violet { background: #7659d6; } +.workbench-apps span.orange { background: #f07835; } +.workbench-apps span.red { background: #df4e46; } +.workbench-apps span.blue { background: #3e78d6; } +.workbench-apps span.green { background: #35a96b; } + +.workbench-apps .material-icons { + font-size: 2rem; +} + +.workbench-apps em { + position: absolute; + top: -0.35rem; + right: -0.35rem; + display: grid; + place-items: center; + min-width: 1.25rem; + height: 1.25rem; + padding: 0 0.25rem; + border: 2px solid #fff; + border-radius: 0.7rem; + color: #fff; + background: #e33f4b; + font-size: 0.68rem; + font-style: normal; +} + +.workbench-apps strong { + width: 100%; + margin-top: 0.55rem; + overflow-wrap: anywhere; + font-size: 0.85rem; + font-weight: 500; + line-height: 1.25; + text-align: center; +} + +.workplace-bottom-nav { + display: grid; + grid-template-columns: repeat(2, 1fr); + min-height: calc(4.4rem + env(safe-area-inset-bottom)); + padding-bottom: env(safe-area-inset-bottom); + border-top: 1px solid #e5e7ea; + background: #fff; + flex: none; +} + +.workplace-bottom-nav button { + display: flex; + align-items: center; + justify-content: center; + min-width: 0; + min-height: 4.4rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #9aa1aa; + background: transparent; + flex-direction: column; +} + +.workplace-bottom-nav button.active { + color: #2d73d2; +} + +.workplace-bottom-nav .material-icons { + font-size: 1.65rem; +} + +.workplace-bottom-nav span { + margin-top: 0.15rem; + font-size: 0.72rem; +} + +.workplace-search { + display: grid; + grid-template-columns: 2.4rem minmax(0, 1fr); + align-items: center; + min-height: 3rem; + margin: 0.8rem; + padding: 0 0.65rem; + border: 1px solid #e4e7ea; + border-radius: 0.35rem; + background: #fff; +} + +.workplace-search .material-icons { + color: #9ba2aa; +} + +.workplace-search input { + width: 100%; + height: 2.8rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + background: transparent; +} + +.organization-content { + background: #f4f5f7; +} + +.organization-tree { + margin-top: 0.7rem; + background: #fff; +} + +.organization-tree button { + display: grid; + grid-template-columns: 2.5rem minmax(0, 1fr) 2rem; + align-items: center; + gap: 0.4rem; + width: 100%; + min-height: 4rem; + margin: 0; + padding: 0.55rem 1rem; + border: 0; + border-bottom: 1px solid #eceef0; + border-radius: 0; + box-shadow: none; + color: #30353c; + background: #fff; + text-align: left; +} + +.organization-tree button > span, +.organization-tree button strong, +.organization-tree button small { + display: block; + min-width: 0; +} + +.organization-tree button strong { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.organization-tree button small { + margin-top: 0.2rem; + color: #8b929b; +} + +.organization-root > .material-icons:first-child { + color: #2f73d2; +} + +.organization-department { + padding-left: 1.75rem !important; +} + +.organization-department > .material-icons:first-child { + color: #e79a32; +} + +.organization-members button { + padding-left: 2.5rem; +} + +.organization-members img { + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + object-fit: cover; +} + +.meeting-list { + padding-bottom: 1rem; +} + +.workplace-tabs { + display: grid; + grid-template-columns: repeat(3, 1fr); + min-height: 3.2rem; + border-bottom: 1px solid #e7e9ec; + background: #fff; +} + +.workplace-tabs button { + position: relative; + min-width: 0; + min-height: 3.2rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #7b838d; + background: transparent; +} + +.workplace-tabs button.active { + color: #286fcf; + font-weight: 600; +} + +.workplace-tabs button.active::after { + position: absolute; + bottom: 0; + left: 30%; + width: 40%; + height: 0.18rem; + border-radius: 0.1rem; + background: #347bd7; + content: ''; +} + +.meeting-card, +.meeting-draft, +.meeting-status { + margin: 0.8rem; + border: 1px solid #e7e9ec; + border-radius: 0.45rem; + background: #fff; +} + +.meeting-card { + padding: 1rem; +} + +.meeting-card > header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 0.8rem; + padding-bottom: 0.85rem; + border-bottom: 1px solid #eceef1; +} + +.meeting-card > header span, +.meeting-card > header strong, +.meeting-card > header small { + display: block; +} + +.meeting-card > header small { + margin-bottom: 0.25rem; + color: #3575cf; +} + +.meeting-card > header strong { + font-size: 1.08rem; +} + +.meeting-card > header em { + flex: none; + padding: 0.3rem 0.5rem; + border-radius: 0.25rem; + color: #b26e10; + background: #fff3df; + font-size: 0.75rem; + font-style: normal; +} + +.meeting-card > header em.accepted { color: #28784f; background: #e5f5ec; } +.meeting-card > header em.declined { color: #ad3d45; background: #fbe9eb; } + +.meeting-card dl { + margin: 0.8rem 0 0; +} + +.meeting-card dl > div { + display: grid; + grid-template-columns: 6.5rem minmax(0, 1fr); + align-items: start; + min-height: 2.1rem; +} + +.meeting-card dt, +.meeting-card dd { + margin: 0; +} + +.meeting-card dt { + display: flex; + align-items: center; + color: #757d87; +} + +.meeting-card dt .material-icons { + margin-right: 0.35rem; + font-size: 1.15rem; +} + +.meeting-card dd { + overflow-wrap: anywhere; +} + +.meeting-card > footer { + display: flex; + justify-content: flex-end; + gap: 0.55rem; + margin-top: 0.8rem; +} + +.meeting-card > footer button { + min-width: 5.4rem; + min-height: 2.5rem; + margin: 0; + padding: 0 0.8rem; + border: 1px solid #d8dce1; + border-radius: 0.3rem; + box-shadow: none; + color: #3073ce; + background: #fff; +} + +.meeting-card > footer button.primary, +.meeting-card > footer button:last-child { + border-color: #347bd7; + color: #fff; + background: #347bd7; +} + +.meeting-card > footer button .material-icons { + margin-right: 0.3rem; + font-size: 1.1rem; + vertical-align: middle; +} + +.meeting-response { + display: grid !important; + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.meeting-response button { + min-width: 0 !important; + padding: 0 0.3rem !important; +} + +.meeting-draft { + display: grid; + grid-template-columns: 2.8rem minmax(0, 1fr) auto; + align-items: center; + gap: 0.6rem; + padding: 0.8rem; +} + +.meeting-draft > .material-icons { + color: #347bd7; + font-size: 2rem; +} + +.meeting-draft span, +.meeting-draft strong, +.meeting-draft small { + display: block; + min-width: 0; +} + +.meeting-draft small { + margin-top: 0.2rem; + color: #838b95; +} + +.meeting-draft button { + min-height: 2.4rem; + margin: 0; + padding: 0 0.6rem; + border: 0; + box-shadow: none; + color: #347bd7; + background: transparent; +} + +.meeting-status { + padding: 1rem; +} + +.meeting-status h2 { + margin: 0 0 0.8rem; + font-size: 1rem; +} + +.meeting-status > div, +.report-statistics > div { + display: grid; + grid-template-columns: repeat(3, 1fr); +} + +.meeting-status span, +.report-statistics > div span { + display: flex; + align-items: center; + min-width: 0; + flex-direction: column; +} + +.meeting-status b, +.report-statistics > div b { + font-size: 1.35rem; +} + +.meeting-status small, +.report-statistics > div small { + margin-top: 0.25rem; + color: #7c848e; +} + +.report-editor-page > main { + padding-bottom: 1rem; +} + +.report-period { + display: flex; + align-items: center; + gap: 0.7rem; + padding: 0.9rem 1rem; + border-bottom: 1px solid #e8eaed; + background: #fff; +} + +.report-period > .material-icons { + color: #347bd7; +} + +.report-period span, +.report-period strong, +.report-period small { + display: block; +} + +.report-period small { + margin-top: 0.2rem; + color: #6b927d; +} + +.report-field { + display: block; + position: relative; + margin-top: 0.7rem; + padding: 1rem; + background: #fff; +} + +.report-field > span { + display: block; + margin-bottom: 0.65rem; + font-weight: 600; +} + +.report-field > span b { + margin-right: 0.2rem; + color: #d8414c; +} + +.report-field textarea { + display: block; + width: 100%; + height: 11rem; + margin: 0; + padding: 0.75rem 0.8rem 2rem; + resize: vertical; + border: 1px solid #dfe3e7; + border-radius: 0.3rem; + box-shadow: none; + background: #fff; + line-height: 1.5; +} + +.report-field > small { + position: absolute; + right: 1.8rem; + bottom: 1.6rem; + color: #9ba2ac; +} + +.report-attachment { + display: grid; + grid-template-columns: 2.5rem minmax(0, 1fr) 2rem; + align-items: center; + gap: 0.5rem; + width: calc(100% - 2rem); + min-height: 4.2rem; + margin: 0.8rem 1rem; + padding: 0.6rem 0.8rem; + border: 1px dashed #cad0d7; + border-radius: 0.35rem; + box-shadow: none; + color: #343a42; + background: #fff; + text-align: left; +} + +.report-attachment > .material-icons:first-child { + color: #347bd7; +} + +.report-attachment span, +.report-attachment strong, +.report-attachment small { + display: block; + min-width: 0; +} + +.report-attachment small { + margin-top: 0.2rem; + color: #888f98; +} + +.workplace-submit-bar { + padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom)); + border-top: 1px solid #e4e7ea; + background: #fff; + flex: none; +} + +.workplace-submit-bar button, +.workplace-primary { + width: 100%; + min-height: 3rem; + margin: 0; + padding: 0 1rem; + border: 0; + border-radius: 0.35rem; + box-shadow: none; + color: #fff; + background: #347bd7; + font-weight: 600; +} + +.report-list-page > main { + padding-bottom: 1rem; +} + +.report-role-switch { + display: grid; + grid-template-columns: repeat(2, 1fr); + margin: 0 0.8rem 0.8rem; + border: 1px solid #dce0e5; + border-radius: 0.3rem; + background: #fff; +} + +.report-role-switch button { + min-height: 2.6rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #737b85; + background: transparent; +} + +.report-role-switch button.active { + color: #fff; + background: #347bd7; +} + +.report-cards { + margin: 0 0.8rem; +} + +.report-cards article { + margin-bottom: 0.7rem; + padding: 0.9rem; + border: 1px solid #e6e9ec; + border-radius: 0.4rem; + background: #fff; +} + +.report-cards article > header { + display: grid; + grid-template-columns: 2.6rem minmax(0, 1fr) auto; + align-items: center; + gap: 0.6rem; +} + +.report-cards article > header img { + width: 2.6rem; + height: 2.6rem; + border-radius: 50%; + object-fit: cover; +} + +.report-cards article > header span, +.report-cards article > header strong, +.report-cards article > header small { + display: block; + min-width: 0; +} + +.report-cards article > header small { + margin-top: 0.15rem; + color: #8b929c; +} + +.report-cards article > header em { + padding: 0.3rem 0.45rem; + border-radius: 0.25rem; + color: #b76811; + background: #fff2df; + font-size: 0.72rem; + font-style: normal; +} + +.report-cards article p { + display: -webkit-box; + margin: 0.8rem 0; + overflow: hidden; + line-height: 1.55; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; +} + +.report-cards article > footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + padding-top: 0.65rem; + border-top: 1px solid #eceef1; +} + +.report-cards article > footer span { + display: flex; + align-items: center; + min-width: 0; + color: #7e8690; + font-size: 0.78rem; +} + +.report-cards article > footer span .material-icons { + margin-right: 0.25rem; + font-size: 1rem; +} + +.report-cards article > footer button { + display: flex; + align-items: center; + flex: none; + min-height: 2.2rem; + margin: 0; + padding: 0 0.1rem 0 0.6rem; + border: 0; + box-shadow: none; + color: #347bd7; + background: transparent; +} + +.report-cards article > footer button .material-icons { + font-size: 1.15rem; +} + +.report-cards > button { + display: grid; + grid-template-columns: 3.2rem minmax(0, 1fr) auto 1.5rem; + align-items: center; + gap: 0.65rem; + width: 100%; + min-height: 5.2rem; + margin: 0 0 0.7rem; + padding: 0.7rem; + border: 1px solid #e6e9ec; + border-radius: 0.4rem; + box-shadow: none; + color: #30353c; + background: #fff; + text-align: left; +} + +.report-month { + display: grid; + place-items: center; + width: 3.2rem; + height: 3.2rem; + border-radius: 0.35rem; + color: #fff; + background: #5577b9; +} + +.report-cards > button > span:nth-child(2), +.report-cards > button strong, +.report-cards > button small { + display: block; + min-width: 0; +} + +.report-cards > button small { + margin-top: 0.25rem; + color: #858d97; +} + +.report-cards > button em { + padding: 0.25rem 0.4rem; + border-radius: 0.25rem; + font-size: 0.72rem; + font-style: normal; +} + +.report-cards > button em.submitted { color: #28784f; background: #e5f5ec; } +.report-cards > button em.draft { color: #ad6c11; background: #fff2dd; } + +.report-statistics { + margin-bottom: 0.7rem; + padding: 1rem; + background: #fff; +} + +.report-statistics > header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + margin-bottom: 1rem; +} + +.report-statistics > header span, +.report-statistics > header strong, +.report-statistics > header small { + display: block; +} + +.report-statistics > header small { + margin-bottom: 0.2rem; + color: #808892; +} + +.report-statistics > header button, +.report-statistics > button { + min-height: 2.4rem; + margin: 0; + padding: 0 0.7rem; + border: 1px solid #dce0e5; + border-radius: 0.3rem; + box-shadow: none; + color: #347bd7; + background: #fff; +} + +.report-statistics > button { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + margin-top: 1rem; +} + +.report-statistics > button .material-icons { + margin-right: 0.35rem; + font-size: 1.15rem; +} + +.report-detail { + padding-bottom: 1.5rem; +} + +.report-detail > section { + margin-bottom: 0.65rem; + padding: 1rem; + background: #fff; +} + +.report-author { + display: grid; + grid-template-columns: 3rem minmax(0, 1fr) auto; + align-items: center; + gap: 0.7rem; +} + +.report-author img { + width: 3rem; + height: 3rem; + border-radius: 50%; + object-fit: cover; +} + +.report-author span, +.report-author strong, +.report-author small { + display: block; + min-width: 0; +} + +.report-author small { + margin-top: 0.2rem; + color: #858d96; +} + +.report-author em { + color: #2c8257; + font-style: normal; +} + +.report-detail h2, +.report-detail h3, +.report-detail p { + margin: 0; +} + +.report-detail h2 { + font-size: 1.05rem; +} + +.report-detail h2 + small { + display: block; + margin-top: 0.4rem; + color: #89919b; +} + +.report-detail h3 { + margin-bottom: 0.6rem; + font-size: 0.98rem; +} + +.report-detail section p { + line-height: 1.7; + white-space: pre-wrap; +} + +.report-file { + display: grid; + grid-template-columns: 2.5rem minmax(0, 1fr) 2rem; + align-items: center; + gap: 0.6rem; +} + +.report-file > .material-icons:first-child { + color: #4f74ad; + font-size: 2rem; +} + +.report-file span, +.report-file strong, +.report-file small { + display: block; +} + +.report-file small { + margin-top: 0.2rem; + color: #8b929b; +} + +.report-updated { + display: flex; + align-items: center; + justify-content: center; + color: #8a929c; + font-size: 0.78rem; +} + +.report-updated .material-icons { + margin-right: 0.25rem; + font-size: 1rem; +} + +.mailbox-page > main { + padding: 0.8rem 1rem 1.5rem; + background: #fff; +} + +.mailbox-page label { + display: block; + position: relative; + margin-top: 1rem; +} + +.mailbox-page label > span:first-child { + display: block; + margin-bottom: 0.55rem; + font-weight: 600; +} + +.mailbox-page input[type='text'], +.mailbox-page label > input:not([type]), +.mailbox-page label > textarea { + width: 100%; + margin: 0; + border: 1px solid #dfe3e7; + border-radius: 0.3rem; + box-shadow: none; + background: #fff; +} + +.mailbox-page label > input:not([type]) { + height: 3rem; + padding: 0 0.75rem; +} + +.mailbox-page label > textarea { + height: 12rem; + padding: 0.75rem 0.75rem 2rem; + resize: vertical; + line-height: 1.5; +} + +.mailbox-content > small { + position: absolute; + right: 0.75rem; + bottom: 0.65rem; + color: #9ca3ac; +} + +.mailbox-notice, +.mailbox-upload { + display: grid; + grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; + align-items: center; + gap: 0.5rem; + width: 100%; + min-height: 4.2rem; + margin: 0; + padding: 0.65rem 0.75rem; + border: 1px solid #dfe4e9; + border-radius: 0.35rem; + box-shadow: none; + color: #343a42; + background: #f7f9fb; + text-align: left; +} + +.mailbox-notice > .material-icons:first-child { + color: #2e7954; +} + +.mailbox-notice span, +.mailbox-notice strong, +.mailbox-notice small { + display: block; + min-width: 0; +} + +.mailbox-notice small { + margin-top: 0.2rem; + color: #78818b; +} + +.mailbox-upload { + grid-template-columns: 2.5rem minmax(0, 1fr) auto; + margin-top: 1rem; + border-style: dashed; +} + +.mailbox-upload > .material-icons { + color: #347bd7; +} + +.mailbox-upload small { + color: #888f99; +} + +.mailbox-anonymous { + display: grid !important; + grid-template-columns: 2rem minmax(0, 1fr); + align-items: center; + gap: 0.5rem; + margin: 1rem 0 !important; + padding: 0.8rem; + border: 1px solid #e4e7ea; + border-radius: 0.35rem; +} + +.mailbox-anonymous input { + width: 1.25rem; + height: 1.25rem; + margin: 0; +} + +.mailbox-anonymous span, +.mailbox-anonymous strong, +.mailbox-anonymous small { + display: block; + min-width: 0; +} + +.mailbox-anonymous small { + margin-top: 0.2rem; + color: #858d96; +} + +.mailbox-notice-backdrop { + display: grid; + position: absolute; + z-index: 60; + inset: 0; + place-items: center; + padding: 1rem; + background: rgba(20,24,29,0.52); +} + +.mailbox-notice-dialog { + width: min(100%, 25rem); + padding: 1.25rem; + border-radius: 0.5rem; + background: #fff; + text-align: center; +} + +.mailbox-notice-dialog > .material-icons { + color: #2f7854; + font-size: 2.7rem; +} + +.mailbox-notice-dialog h2 { + margin: 0.6rem 0 0.8rem; + font-size: 1.15rem; +} + +.mailbox-notice-dialog p { + margin: 0.65rem 0; + color: #555d67; + line-height: 1.65; + text-align: left; +} + +.mailbox-notice-dialog small { + display: block; + margin: 0.8rem 0; + color: #898f98; +} + +.mailbox-notice-dialog button { + width: 100%; + min-height: 2.9rem; + margin: 0.5rem 0 0; + padding: 0 1rem; + border: 0; + border-radius: 0.35rem; + box-shadow: none; + color: #fff; + background: #347bd7; +} + +@media screen and (max-width: 480px) { + .workbench-apps { + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 1.2rem 0.35rem; + } + + .workbench-banner { + grid-template-columns: minmax(0, 1fr) 4rem; + padding: 1rem; + } + + .workbench-banner > .material-icons { + font-size: 3.8rem; + } + + .meeting-card dl > div { + grid-template-columns: 5.8rem minmax(0, 1fr); + } + + .report-cards > button { + grid-template-columns: 3.2rem minmax(0, 1fr) auto 1.2rem; + gap: 0.45rem; + } +} + * { box-sizing: border-box; padding: 0; @@ -3768,6 +5041,6060 @@ div.toast.show { animation: fadein 0.5s, fadeout 0.5s 2.5s; } +/* Tenant entry, authentication, and identity security. */ +#sidepanel.auth-onboarding-panel { + width: 100%; + min-width: 0; + flex: 1 1 auto; + color-scheme: light; + background: #f7f9fc; + color: #20242c; +} + +.auth-onboarding-panel * { + box-sizing: border-box; + letter-spacing: 0; +} + +.auth-page, +.auth-landing { + position: relative; + width: 100%; + min-height: 100%; + overflow-x: hidden; + overflow-y: auto; + background: #fff; +} + +.auth-soft-bg { + background: #f6f7f9; +} + +.auth-landing { + display: flex; + flex-direction: column; + align-items: center; + padding: max(1.5rem, env(safe-area-inset-top)) 2rem max(1.5rem, env(safe-area-inset-bottom)); + background: + radial-gradient(ellipse 40% 25% at 90% 0%, rgba(68, 151, 255, 0.14), transparent 72%), + #fff; +} + +.auth-landing-form { + width: min(100%, 28rem); + margin: auto 0; +} + +.auth-brand { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 4rem; +} + +.auth-logo { + display: grid; + place-items: center; + width: 5.5rem; + height: 5.5rem; + border-radius: 0.75rem; + background: #fff; + box-shadow: 0 0.75rem 2rem rgba(35, 74, 125, 0.14); +} + +.auth-logo span { + display: grid; + place-items: center; + width: 3.75rem; + height: 3.75rem; + border-radius: 50% 50% 50% 18%; + color: #fff; + background: #1677ff; + font-size: 2.2rem; + font-weight: 700; + transform: rotate(-18deg); +} + +.auth-brand h1 { + margin: 1.3rem 0 0; + color: #14171c; + font-size: 2rem; + font-weight: 700; +} + +.auth-top-link, +.auth-bottom-link, +.auth-back-link, +.auth-text-button, +.auth-switch button, +.auth-remove-file { + width: auto; + min-width: 0; + height: auto; + min-height: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #1677ff; + background: transparent; + font-size: 0.95rem; + text-transform: none; +} + +.auth-top-link { + position: absolute; + top: max(1.5rem, env(safe-area-inset-top)); + right: 2rem; +} + +.auth-bottom-link { + margin-top: auto; + padding-top: 2rem; +} + +.auth-back-link { + position: absolute; + top: max(1.5rem, env(safe-area-inset-top)); + left: 2rem; + display: flex; + align-items: center; + color: #616975; +} + +.auth-back-link .material-icons { + margin-right: 0.15rem; + font-size: 1rem; +} + +.auth-field-wrap { + margin-bottom: 1rem; +} + +.auth-field { + display: flex; + align-items: center; + min-height: 3.8rem; + border: 1px solid transparent; + border-radius: 0.5rem; + background: #f2f4f7; + transition: border-color 150ms, box-shadow 150ms; +} + +.auth-field:focus-within { + border-color: #4091ff; + box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.1); +} + +.auth-field.invalid { + border-color: #d94b4b; +} + +.auth-field input { + min-width: 0; + width: 100%; + height: 3.7rem; + margin: 0; + padding: 0 1rem; + border: 0; + box-shadow: none; + color: #252931; + background: transparent; + font-size: 1rem; +} + +.auth-field input:focus { + box-shadow: none; +} + +.auth-field input::placeholder, +.auth-list-form input::placeholder, +.auth-realname-content input::placeholder, +.auth-form textarea::placeholder { + color: #b2b7bf; +} + +.auth-field-icon { + flex: none; + margin-left: 1rem; + color: #4091ff; + font-size: 1.35rem; +} + +.auth-inline-icon, +.auth-icon-button { + display: grid; + place-items: center; + flex: none; + width: 3.25rem; + min-width: 3.25rem; + height: 3.25rem; + min-height: 3.25rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #a7adb6; + background: transparent; +} + +.auth-inline-icon .material-icons { + font-size: 1.25rem; +} + +.auth-field-error { + margin-top: 0.4rem; + color: #cf3f3f; + font-size: 0.82rem; +} + +.auth-primary { + width: 100%; + height: 3.8rem; + margin: 1rem 0 0; + border: 0; + border-radius: 0.5rem; + color: #fff; + background: #368bfa; + box-shadow: 0 0.4rem 1rem rgba(54, 139, 250, 0.2); + font-size: 1.08rem; + font-weight: 500; + text-transform: none; +} + +.auth-primary:hover:not([disabled]), +.auth-primary:focus:not([disabled]) { + background: #1677e8; +} + +.auth-primary[disabled] { + color: #fff; + background: #b8d5fa; + box-shadow: none; + cursor: default; +} + +.auth-row { + display: flex; + align-items: center; +} + +.auth-row-end { + justify-content: flex-end; + min-height: 1.5rem; + margin-top: -0.35rem; +} + +.auth-switch { + margin: 1.3rem 0 0; + color: #4a4f57; + text-align: center; +} + +.auth-agreement { + display: flex; + align-items: flex-start; + max-width: 32rem; + margin-top: auto; + color: #454b54; + font-size: 0.9rem; + line-height: 1.5; +} + +.auth-agreement input { + width: 1.1rem; + height: 1.1rem; + margin: 0.12rem 0.55rem 0 0; + accent-color: #368bfa; +} + +.auth-agreement a { + color: #1677ff; +} + +.auth-form-alert { + display: flex; + align-items: center; + margin: 0 0 1rem; + padding: 0.75rem 0.9rem; + border-radius: 0.4rem; + color: #bd3434; + background: #fff1f1; + font-size: 0.9rem; +} + +.auth-form-alert .material-icons { + margin-right: 0.45rem; + font-size: 1.15rem; +} + +.auth-header { + position: sticky; + top: 0; + z-index: 2; + display: grid; + grid-template-columns: 3.5rem 1fr 3.5rem; + align-items: center; + height: 4.25rem; + padding-top: env(safe-area-inset-top); + border-bottom: 1px solid #edf0f4; + background: rgba(255,255,255,0.96); +} + +.auth-header h1 { + margin: 0; + color: #252931; + font-size: 1.2rem; + text-align: center; +} + +.auth-header .auth-icon-button { + color: #252931; +} + +.auth-header .material-icons { + font-size: 1.25rem; +} + +.auth-content { + width: 100%; + min-height: calc(100% - 4.25rem); + margin: 0 auto; + padding: 2rem; +} + +.auth-content-narrow { + max-width: 40rem; +} + +.auth-steps { + display: grid; + grid-template-columns: repeat(3, 1fr); + margin: 0 0 2.25rem; + padding: 0; + list-style: none; +} + +.auth-steps li { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + color: #b4b9c1; + text-align: center; +} + +.auth-steps li:not(:last-child)::after { + content: ''; + position: absolute; + top: 1rem; + left: calc(50% + 1.25rem); + width: calc(100% - 2.5rem); + height: 2px; + background: #d9dde3; +} + +.auth-steps li.active:not(:last-child)::after { + background: #4091ff; +} + +.auth-steps span { + display: grid; + place-items: center; + width: 2rem; + height: 2rem; + border: 1px solid #aeb4bd; + border-radius: 50%; + background: #fff; +} + +.auth-steps b { + margin-top: 0.55rem; + font-size: 0.86rem; + font-weight: 500; +} + +.auth-steps .active { + color: #368bfa; +} + +.auth-steps .active span { + border-color: #368bfa; + color: #fff; + background: #368bfa; +} + +.auth-label { + display: block; + margin: 1.25rem 0 0.55rem; + color: #292d34; + font-size: 1rem; + font-weight: 500; +} + +.auth-label span { + margin-left: 0.35rem; + color: #87909c; + font-size: 0.78rem; + font-weight: 400; +} + +.auth-help, +.auth-review-time { + margin: -0.45rem 0 0; + color: #9ba1aa; + font-size: 0.84rem; +} + +.auth-upload { + display: flex; + position: relative; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 12rem; + overflow: hidden; + border: 1px dashed #c7ccd4; + border-radius: 0.5rem; + background: #fafafa; + cursor: pointer; +} + +.auth-upload.invalid { + border-color: #d94b4b; +} + +.auth-upload input, +.auth-add-screenshot input { + display: none; +} + +.auth-upload .material-icons { + color: #4091ff; + font-size: 3.4rem; +} + +.auth-upload img { + width: 100%; + height: 8rem; + object-fit: contain; +} + +.auth-upload strong { + max-width: 90%; + margin-top: 0.65rem; + overflow: hidden; + color: #252931; + font-size: 0.95rem; + text-overflow: ellipsis; + white-space: nowrap; +} + +.auth-upload small { + margin-top: 0.35rem; + color: #a4aab2; +} + +.auth-remove-file { + margin-top: 0.5rem; + color: #cf3f3f; +} + +.auth-review-time { + display: flex; + align-items: center; + justify-content: center; + margin-top: 0.85rem; +} + +.auth-review-time .material-icons { + margin-right: 0.35rem; + font-size: 1rem; +} + +.auth-form textarea { + width: 100%; + min-height: 10rem; + resize: vertical; + padding: 1rem; + border: 1px solid #e1e4e9; + border-radius: 0.5rem; + box-shadow: none; + color: #252931; + background: #fff; + font: inherit; + line-height: 1.6; +} + +.auth-form textarea:focus { + border-color: #4091ff; + outline: none; + box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.1); +} + +.auth-form textarea.invalid { + border-color: #d94b4b; +} + +.auth-counter { + margin: -1.7rem 0.75rem 0.8rem 0; + color: #a0a6af; + font-size: 0.8rem; + text-align: right; +} + +.auth-screenshot-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 0.75rem; +} + +.auth-screenshot, +.auth-add-screenshot { + position: relative; + aspect-ratio: 1; + overflow: hidden; + border: 1px solid #dce0e5; + border-radius: 0.4rem; + background: #fff; +} + +.auth-screenshot img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.auth-screenshot button { + position: absolute; + top: 0.2rem; + right: 0.2rem; + display: grid; + place-items: center; + width: 1.4rem; + min-width: 1.4rem; + height: 1.4rem; + min-height: 1.4rem; + margin: 0; + padding: 0; + border: 0; + border-radius: 50%; + color: #fff; + background: rgba(0,0,0,0.58); +} + +.auth-screenshot button .material-icons { + font-size: 0.9rem; +} + +.auth-add-screenshot { + display: grid; + place-items: center; + color: #87909c; + cursor: pointer; +} + +.auth-code-button { + flex: none; + width: auto; + min-width: 6.8rem; + height: 2.7rem; + min-height: 2.7rem; + margin: 0 0.55rem 0 0; + padding: 0 0.8rem; + border: 0; + border-radius: 0.4rem; + box-shadow: none; + color: #1677ff; + background: transparent; + font-size: 0.9rem; + text-transform: none; +} + +.auth-code-button[disabled] { + color: #a7adb6; +} + +.auth-register-form .auth-brand { + margin-bottom: 2rem; +} + +.auth-register-page .auth-agreement { + margin-top: 2rem; +} + +.auth-list-form { + display: flex; + flex-direction: column; + min-height: calc(100vh - 8.25rem); +} + +.auth-list-form label { + display: grid; + grid-template-columns: 7rem 1fr auto; + align-items: center; + min-height: 4.5rem; + padding: 0 1rem; + border-bottom: 1px solid #e4e7eb; + background: #fff; +} + +.auth-list-form label span { + color: #30343b; + font-size: 1rem; +} + +.auth-list-form input { + min-width: 0; + width: 100%; + height: 4rem; + margin: 0; + border: 0; + box-shadow: none; + color: #252931; + background: transparent; + font-size: 1rem; +} + +.auth-list-form input:focus { + box-shadow: none; +} + +.auth-list-gap { + height: 1rem; + background: #f6f7f9; +} + +.auth-sticky-action { + margin-top: auto; +} + +.auth-realname-page { + background: #f5f6f8; +} + +.auth-realname-hero { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 14rem; + padding: 2rem max(2rem, calc((100% - 44rem) / 2)); + color: #12357b; + background: #cfe1fa; +} + +.auth-realname-hero div { + display: flex; + flex-direction: column; +} + +.auth-realname-hero strong { + font-size: 2.5rem; + font-weight: 800; +} + +.auth-realname-hero span { + margin-top: 0.75rem; + color: #53799c; + font-size: 1.2rem; +} + +.auth-realname-hero > .material-icons { + color: #4a82ee; + font-size: 9rem; + opacity: 0.9; +} + +.auth-realname-content { + width: min(calc(100% - 2rem), 44rem); + margin: -1.5rem auto 0; + padding: 0 0 2rem; +} + +.auth-realname-content h2 { + position: relative; + z-index: 1; + margin: 0; + padding: 1.5rem 2rem; + border: 1px solid #fff; + border-radius: 0.5rem 0.5rem 0 0; + background: #e8f1fd; + font-size: 1.15rem; +} + +.auth-realname-content form { + padding: 2rem; + background: #fff; +} + +.auth-realname-content label { + display: grid; + grid-template-columns: 8rem 1fr; + align-items: center; + min-height: 4.5rem; + margin-bottom: 1rem; + padding: 0 1rem; + border-radius: 0.5rem; + background: #f6f6f7; +} + +.auth-realname-content input { + min-width: 0; + width: 100%; + height: 3.8rem; + margin: 0; + border: 0; + box-shadow: none; + color: #30343b; + background: transparent; + font-size: 1rem; +} + +.auth-privacy-note { + display: flex; + margin: 1rem 0 0; + padding: 1rem; + border-radius: 0.4rem; + color: #a0a6af; + background: #fff; + line-height: 1.5; +} + +.auth-privacy-note .material-icons { + margin-right: 0.5rem; + font-size: 1.15rem; +} + +.auth-reminder-demo { + overflow: hidden; + background: #f5f6f8; +} + +.auth-demo-chat { + width: min(100%, 42rem); + margin: 0 auto; + padding: 2rem; +} + +.auth-demo-chat h1 { + text-align: center; +} + +.auth-demo-search { + display: flex; + align-items: center; + justify-content: center; + height: 2.8rem; + margin-bottom: 1rem; + border-radius: 0.5rem; + color: #969ca5; + background: #e9ecf0; +} + +.auth-demo-row { + display: flex; + align-items: center; + min-height: 4.8rem; + border-bottom: 1px solid #e3e6ea; +} + +.auth-demo-row > span { + display: grid; + place-items: center; + width: 3.2rem; + height: 3.2rem; + margin-right: 0.8rem; + border-radius: 0.5rem; + color: #fff; + background: #368bfa; +} + +.auth-demo-row div { + display: flex; + flex-direction: column; +} + +.auth-demo-row small { + margin-top: 0.3rem; + color: #969ca5; +} + +.auth-modal-backdrop { + position: absolute; + inset: 0; + z-index: 3; + display: grid; + place-items: center; + padding: 1.5rem; + background: rgba(0,0,0,0.38); +} + +.auth-modal { + width: min(100%, 30rem); + padding: 2rem; + border-radius: 0.5rem; + background: #fff; + box-shadow: 0 1rem 3rem rgba(0,0,0,0.18); + text-align: center; +} + +.auth-modal h2 { + margin: 0 0 1rem; + font-size: 1.45rem; +} + +.auth-modal p { + color: #858c96; + line-height: 1.6; + text-align: left; +} + +.auth-modal .auth-text-button { + margin-top: 1rem; + color: #7c838d; +} + +.auth-pin-content { + display: flex; + position: relative; + flex-direction: column; + align-items: center; + width: min(100%, 32rem); + margin: 0 auto; + padding: 6rem 2rem 2rem; +} + +.auth-pin-content h1 { + margin: 0 0 3.5rem; + font-size: 1.8rem; +} + +.auth-pin-boxes { + display: grid; + grid-template-columns: repeat(4, 4rem); + gap: 0.8rem; +} + +.auth-pin-boxes span { + display: grid; + place-items: center; + aspect-ratio: 1; + border-radius: 0.35rem; + color: #30343b; + background: #f2f3f5; +} + +.auth-pin-input { + position: absolute; + top: 11rem; + width: 19rem; + height: 5rem; + opacity: 0; +} + +.auth-pin-content .auth-primary { + width: min(100%, 24rem); + margin-top: 3rem; +} + +.auth-toast { + position: fixed; + z-index: 20; + bottom: max(2rem, env(safe-area-inset-bottom)); + left: 50%; + display: flex; + align-items: center; + max-width: calc(100% - 2rem); + padding: 0.8rem 1.1rem; + border-radius: 0.4rem; + color: #fff; + background: rgba(31, 35, 42, 0.92); + box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.18); + transform: translateX(-50%); + animation: auth-toast-in 180ms ease-out; +} + +.auth-toast .material-icons { + margin-right: 0.5rem; + color: #63d68b; + font-size: 1.15rem; +} + +.security-product-links button.flat-button { + display: grid; + grid-template-columns: 2rem 1fr 2rem; + align-items: center; + width: 100%; + margin: 0; + color: var(--clr-text-primary); + text-align: left; + text-transform: none; +} + +.security-product-links .trailing { + color: var(--clr-text-tertiary); +} + +@keyframes auth-toast-in { + from { opacity: 0; transform: translate(-50%, 0.5rem); } + to { opacity: 1; transform: translate(-50%, 0); } +} + +/* Message center, quick navigation, and system notices. */ +#sidepanel.message-center-panel { + width: 24rem; + min-width: 20rem; + flex: 0 0 24rem; + color-scheme: light; + background: #fff; + color: #242830; +} + +#sidepanel.message-center-panel.full-page { + width: 100%; + min-width: 0; + flex: 1 1 auto; +} + +.message-center-panel * { + box-sizing: border-box; + letter-spacing: 0; +} + +.messages-product-page, +.message-actions-page, +.system-messages-page { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + min-height: 100%; + overflow: hidden; + background: #fff; +} + +.messages-home-header, +.messages-sub-header { + display: grid; + position: relative; + z-index: 5; + grid-template-columns: 3.5rem 1fr 3.5rem; + align-items: center; + flex: none; + min-height: 4.25rem; + padding-top: env(safe-area-inset-top); + border-bottom: 1px solid #f0f1f3; + background: #fff; +} + +.messages-home-header h1, +.messages-sub-header h1 { + grid-column: 2; + margin: 0; + overflow: hidden; + color: #22262d; + font-size: 1.25rem; + font-weight: 600; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; +} + +.messages-menu-button, +.messages-sub-header button { + display: grid; + place-items: center; + width: 3.25rem; + min-width: 3.25rem; + height: 3.25rem; + min-height: 3.25rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #272b32; + background: transparent; +} + +.messages-menu-button { + grid-column: 3; +} + +.messages-menu-button .material-icons { + font-size: 1.75rem; +} + +.messages-sub-header button .material-icons { + font-size: 1.2rem; +} + +.messages-connection { + grid-column: 2; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; + font-weight: 600; +} + +.messages-spinner { + width: 1.25rem; + height: 1.25rem; + margin-right: 0.55rem; + border: 3px dotted #aab0b8; + border-radius: 50%; + animation: messages-spin 850ms linear infinite; +} + +@keyframes messages-spin { + to { transform: rotate(360deg); } +} + +.messages-home-content { + width: 100%; + min-height: 0; + overflow-x: hidden; + overflow-y: auto; + flex: 1 1 auto; + padding-bottom: 1rem; +} + +.message-center-panel.full-page .messages-home-content, +.message-center-panel.full-page .messages-home-header > * { + --messages-content-width: 52rem; +} + +.messages-search { + display: flex; + align-items: center; + height: 2.8rem; + margin: 0.75rem; + border: 1px solid transparent; + border-radius: 0.5rem; + color: #a5abb4; + background: #f1f2f4; +} + +.message-center-panel.full-page .messages-search, +.message-center-panel.full-page .messages-frequent, +.message-center-panel.full-page .messages-conversations { + width: min(calc(100% - 2rem), 52rem); + margin-right: auto; + margin-left: auto; +} + +.messages-search:focus-within { + border-color: #4091ff; + box-shadow: 0 0 0 3px rgba(22,119,255,0.08); +} + +.messages-search .material-icons { + margin-left: 0.9rem; + font-size: 1.35rem; +} + +.messages-search input { + min-width: 0; + width: 100%; + height: 2.7rem; + margin: 0; + padding: 0 0.85rem; + border: 0; + box-shadow: none; + color: #252931; + background: transparent; + font-size: 0.95rem; +} + +.messages-search input:focus { + box-shadow: none; +} + +.messages-search input::placeholder { + color: #a5abb4; +} + +.messages-frequent { + padding: 0.3rem 0 0.8rem; +} + +.messages-frequent h2 { + margin: 0 0.75rem 0.65rem; + color: #9399a2; + font-size: 0.88rem; + font-weight: 400; +} + +.messages-frequent-scroll { + display: flex; + gap: 0.75rem; + overflow-x: auto; + padding: 0 0.75rem 0.3rem; + scrollbar-width: none; +} + +.messages-frequent-scroll::-webkit-scrollbar { + display: none; +} + +.messages-frequent-scroll button { + display: flex; + flex: 0 0 3.75rem; + flex-direction: column; + align-items: center; + width: 3.75rem; + min-width: 3.75rem; + height: auto; + min-height: 0; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #656b74; + background: transparent; + text-transform: none; +} + +.messages-frequent-scroll button > span { + width: 100%; + margin-top: 0.4rem; + overflow: hidden; + font-size: 0.78rem; + text-overflow: ellipsis; + white-space: nowrap; +} + +.messages-conversations { + display: flex; + flex-direction: column; +} + +.messages-conversation { + display: grid; + grid-template-columns: 3.4rem minmax(0, 1fr) auto; + align-items: center; + width: 100%; + min-width: 0; + min-height: 4.55rem; + margin: 0; + padding: 0.45rem 0.75rem; + border: 0; + border-radius: 0; + border-bottom: 1px solid #f1f2f4; + box-shadow: none; + color: #252931; + background: #fff; + text-align: left; + text-transform: none; +} + +.messages-conversation:hover, +.messages-conversation:focus { + background: #f6f8fb; +} + +.messages-conversation.pinned { + background: #f4f6f8; +} + +.messages-avatar { + display: grid; + position: relative; + place-items: center; + width: 3rem; + height: 3rem; + overflow: visible; + border-radius: 0.55rem; + color: #fff; + background: #3c8df6; +} + +.messages-avatar.small { + width: 3.2rem; + height: 3.2rem; + border-radius: 0.65rem; +} + +.messages-avatar.orange { + color: #ff951c; + background: #fff5e5; +} + +.messages-avatar.green { + color: #16ae54; + background: #eefaf3; +} + +.messages-avatar img { + width: 100%; + height: 100%; + border-radius: inherit; + object-fit: cover; +} + +.messages-avatar > .material-icons { + font-size: 1.8rem; +} + +.messages-avatar .online, +.messages-avatar .offline { + position: absolute; + right: -0.18rem; + bottom: -0.12rem; + width: 0.72rem; + min-width: 0.72rem; + height: 0.72rem; + min-height: 0.72rem; + border: 2px solid #fff; + border-radius: 50%; + background: #1fb36a; +} + +.messages-avatar .offline { + background: #aeb4bd; +} + +.messages-conversation-copy { + display: flex; + min-width: 0; + flex-direction: column; + justify-content: center; + padding: 0 0.55rem; +} + +.messages-conversation-copy strong, +.messages-conversation-copy small { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.messages-conversation-copy strong { + color: #272b31; + font-size: 1rem; + font-weight: 500; +} + +.messages-conversation-copy small { + margin-top: 0.35rem; + color: #969ca5; + font-size: 0.84rem; + font-weight: 400; +} + +.messages-conversation-meta { + display: flex; + align-self: stretch; + min-width: 3.4rem; + flex-direction: column; + align-items: flex-end; + justify-content: space-around; +} + +.messages-conversation-meta time { + color: #9ca2aa; + font-size: 0.72rem; + white-space: nowrap; +} + +.messages-conversation-meta b { + display: grid; + place-items: center; + min-width: 1.25rem; + height: 1.25rem; + padding: 0 0.3rem; + border-radius: 0.7rem; + color: #fff; + background: #f34b46; + font-size: 0.7rem; + font-weight: 500; +} + +.messages-conversation-meta .material-icons { + color: #a5abb3; + font-size: 1.1rem; +} + +.messages-empty { + display: flex; + flex-direction: column; + align-items: center; + padding: 4rem 1rem; + color: #9ca2aa; +} + +.messages-empty .material-icons { + font-size: 2.4rem; +} + +.messages-bottom-nav { + display: grid; + grid-template-columns: repeat(2, 1fr); + flex: none; + min-height: 4.8rem; + padding-bottom: env(safe-area-inset-bottom); + border-top: 1px solid #eceef1; + background: #fff; +} + +.messages-bottom-nav button { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 4.8rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #9ca2ab; + background: transparent; + text-transform: none; +} + +.messages-bottom-nav button.active { + color: #297fea; +} + +.messages-bottom-nav .material-icons { + font-size: 1.55rem; +} + +.messages-bottom-nav span { + margin-top: 0.25rem; + font-size: 0.76rem; +} + +.messages-menu-backdrop, +.message-action-backdrop { + position: absolute; + inset: 0; + z-index: 10; + background: rgba(0,0,0,0.43); +} + +.messages-quick-menu { + position: absolute; + top: calc(3.6rem + env(safe-area-inset-top)); + right: 0.65rem; + width: 12rem; + overflow: hidden; + border-radius: 0.4rem; + background: #4b4c4f; + box-shadow: 0 0.8rem 2rem rgba(0,0,0,0.24); +} + +.messages-quick-menu::before { + content: ''; + position: absolute; + top: -0.45rem; + right: 1rem; + width: 0.9rem; + height: 0.9rem; + background: #4b4c4f; + transform: rotate(45deg); +} + +.messages-quick-menu button { + display: grid; + position: relative; + grid-template-columns: 2.2rem 1fr; + align-items: center; + width: 100%; + min-height: 3.2rem; + margin: 0; + padding: 0 1rem; + border: 0; + border-radius: 0; + box-shadow: none; + color: #fff; + background: transparent; + text-align: left; + text-transform: none; +} + +.messages-quick-menu button:hover, +.messages-quick-menu button:focus { + background: rgba(255,255,255,0.09); +} + +.messages-quick-menu .material-icons { + font-size: 1.35rem; +} + +.messages-quick-menu span { + font-size: 0.98rem; +} + +.messages-toast { + position: fixed; + z-index: 30; + bottom: max(1.5rem, env(safe-area-inset-bottom)); + left: 50%; + max-width: calc(100% - 2rem); + padding: 0.75rem 1.1rem; + border-radius: 0.4rem; + color: #fff; + background: rgba(34,38,45,0.94); + box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.18); + text-align: center; + transform: translateX(-50%); +} + +.message-actions-page { + background: #e8eaee; +} + +.message-actions-chat { + flex: 1 1 auto; + min-height: 0; + overflow-y: auto; + padding: 1.5rem max(1rem, calc((100% - 50rem) / 2)); + background: #edf0f3 url('../img/bkg/a00.png') repeat; +} + +.message-time { + margin: 0 0 1.5rem; + color: #8d949d; + font-size: 0.78rem; + text-align: center; +} + +.message-demo-row { + display: flex; + align-items: flex-start; + gap: 0.65rem; + margin-bottom: 1rem; +} + +.message-demo-row.mine { + justify-content: flex-end; +} + +.message-demo-row .messages-avatar { + width: 2.7rem; + height: 2.7rem; + flex: 0 0 2.7rem; +} + +.message-demo-bubble { + width: auto; + max-width: min(72%, 28rem); + min-height: 2.7rem; + height: auto; + margin: 0; + padding: 0.75rem 0.9rem; + border: 0; + border-radius: 0.35rem; + box-shadow: 0 1px 2px rgba(0,0,0,0.08); + color: #252931; + background: #fff; + font-size: 0.95rem; + font-weight: 400; + line-height: 1.5; + text-align: left; + text-transform: none; +} + +.message-demo-bubble.mine { + background: #b9eb8f; +} + +.message-operation-result { + color: #777f89; + font-size: 0.8rem; + text-align: center; +} + +.message-demo-composer { + display: grid; + grid-template-columns: 2.5rem minmax(0,1fr) 2.5rem 2.5rem; + align-items: center; + flex: none; + min-height: 4rem; + padding: 0.5rem max(0.75rem, calc((100% - 52rem) / 2)); + background: #f7f8fa; +} + +.message-demo-composer span { + min-width: 0; + height: 2.7rem; + padding: 0 0.8rem; + overflow: hidden; + border-radius: 0.35rem; + color: #a2a8b0; + background: #fff; + line-height: 2.7rem; + white-space: nowrap; +} + +.message-demo-composer .material-icons { + color: #555c65; + font-size: 1.45rem; + text-align: center; +} + +.message-action-backdrop { + display: grid; + place-items: center; +} + +.message-action-menu { + width: min(calc(100% - 3rem), 23rem); + overflow: hidden; + border-radius: 0.5rem; + background: #4b4c4f; + box-shadow: 0 1rem 3rem rgba(0,0,0,0.24); +} + +.message-action-menu button { + display: grid; + grid-template-columns: 1fr 2rem; + align-items: center; + width: calc(100% - 2rem); + min-height: 3.1rem; + margin: 0 1rem; + padding: 0; + border: 0; + border-radius: 0; + border-bottom: 1px solid rgba(255,255,255,0.1); + box-shadow: none; + color: #fff; + background: transparent; + text-align: left; + text-transform: none; +} + +.message-action-menu button:last-child { + border-bottom: 0; +} + +.message-action-menu button:hover, +.message-action-menu button:focus { + background: rgba(255,255,255,0.08); +} + +.message-action-menu span { + font-size: 0.98rem; +} + +.message-action-menu .material-icons { + font-size: 1.3rem; +} + +.system-messages-page { + background: #f4f5f7; +} + +.system-notification-list { + width: 100%; + max-width: 52rem; + margin: 0 auto; + overflow-y: auto; + padding: 1.5rem; +} + +.system-notification-list article { + margin-bottom: 1.5rem; +} + +.system-notification-list article > time { + display: block; + margin-bottom: 0.75rem; + color: #a2a8b0; + font-size: 0.82rem; + text-align: center; +} + +.system-notification-card { + padding: 1.3rem; + border: 1px solid #eceef1; + border-radius: 0.5rem; + background: #fff; + box-shadow: 0 0.2rem 0.8rem rgba(37,49,65,0.04); +} + +.system-notification-list article.read .system-notification-card { + opacity: 0.82; +} + +.system-notification-card header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.system-notification-card h2 { + margin: 0; + color: #20242b; + font-size: 1.05rem; +} + +.system-notification-card header > span { + padding: 0.15rem 0.4rem; + border-radius: 0.25rem; + color: #fff; + background: #f34b46; + font-size: 0.7rem; +} + +.system-notification-card p { + margin: 0.85rem 0; + color: #555c66; + line-height: 1.55; +} + +.system-notification-card p button { + display: inline; + width: auto; + min-width: 0; + height: auto; + min-height: 0; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #1683f8; + background: transparent; + font: inherit; + text-transform: none; +} + +.system-notification-card dl { + margin: 0; +} + +.system-notification-card dl div { + display: flex; + margin: 0.35rem 0; +} + +.system-notification-card dt { + color: #242830; + font-weight: 600; +} + +.system-notification-card dd { + margin: 0; + color: #555c66; +} + +.system-security-link { + display: flex; + align-items: center; + width: auto; + min-width: 0; + height: auto; + min-height: 0; + margin: 0.6rem 0 0; + padding: 0; + border: 0; + box-shadow: none; + color: #1683f8; + background: transparent; + font-size: 0.9rem; + text-transform: none; +} + +.system-security-link .material-icons { + font-size: 1.1rem; +} + +.system-notification-card footer { + margin-top: 1.1rem; + color: #767e88; + line-height: 1.6; +} + +/* Direct-message relationship states and structured message cards. */ +#sidepanel.direct-message-panel { + width: 100%; + min-width: 0; + flex: 1 1 auto; + color-scheme: light; + background: #f4f6f8; + color: #252931; +} + +.direct-message-panel * { + box-sizing: border-box; + letter-spacing: 0; +} + +.chat-product-page { + display: flex; + position: relative; + flex-direction: column; + width: 100%; + min-height: 100%; + overflow: hidden; + background: #f4f6f8; +} + +.chat-product-header { + display: grid; + position: relative; + z-index: 4; + grid-template-columns: 3.5rem minmax(0,1fr) 3.5rem; + align-items: center; + flex: none; + min-height: 4.5rem; + padding-top: env(safe-area-inset-top); + border-bottom: 1px solid #eceef1; + background: #fff; +} + +.chat-product-header > button { + display: grid; + place-items: center; + width: 3.25rem; + min-width: 3.25rem; + height: 3.25rem; + min-height: 3.25rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #292d34; + background: transparent; +} + +.chat-product-header > button .material-icons { + font-size: 1.25rem; +} + +.chat-product-header > div { + min-width: 0; + text-align: center; +} + +.chat-product-header h1 { + margin: 0; + overflow: hidden; + color: #23272e; + font-size: 1.2rem; + text-overflow: ellipsis; + white-space: nowrap; +} + +.chat-product-header span { + display: flex; + align-items: center; + justify-content: center; + margin-top: 0.15rem; + color: #7d848e; + font-size: 0.78rem; +} + +.chat-product-header span i { + width: 0.55rem; + height: 0.55rem; + margin-right: 0.3rem; + border-radius: 50%; + background: #16bf78; +} + +.chat-product-timeline { + width: 100%; + min-height: 0; + overflow-x: hidden; + overflow-y: auto; + flex: 1 1 auto; + padding: 1.5rem max(1rem, calc((100% - 54rem) / 2)); + scroll-behavior: smooth; +} + +.chat-time { + margin: 0.3rem 0 1.4rem; + color: #9299a2; + font-size: 0.8rem; + text-align: center; +} + +.chat-message-row { + display: flex; + align-items: flex-start; + gap: 0.65rem; + margin: 0 0 1rem; +} + +.chat-message-row.mine { + justify-content: flex-end; +} + +.chat-avatar { + width: 2.8rem; + height: 2.8rem; + overflow: hidden; + flex: 0 0 2.8rem; + border-radius: 0.5rem; + background: #dfe3e8; +} + +.chat-avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.chat-message-stack { + display: flex; + min-width: 0; + max-width: min(72%, 32rem); + flex-direction: column; +} + +.chat-message-row.mine .chat-message-stack { + align-items: flex-end; +} + +.chat-bubble { + position: relative; + min-width: 2.8rem; + min-height: 2.8rem; + padding: 0.72rem 0.9rem; + border-radius: 0.45rem; + color: #282c33; + background: #fff; + box-shadow: 0 1px 2px rgba(31,39,50,0.06); + font-size: 0.98rem; + line-height: 1.5; + overflow-wrap: anywhere; +} + +.chat-bubble::before { + content: ''; + position: absolute; + top: 0.85rem; + left: -0.35rem; + width: 0.7rem; + height: 0.7rem; + background: inherit; + transform: rotate(45deg); +} + +.chat-bubble.mine { + color: #fff; + background: #398afa; +} + +.chat-bubble.mine::before { + right: -0.35rem; + left: auto; +} + +.chat-bubble.image, +.chat-bubble.voice { + padding: 0; + background: transparent; + box-shadow: none; +} + +.chat-bubble.image::before, +.chat-bubble.voice::before { + display: none; +} + +.chat-message-status { + display: flex; + align-items: center; + justify-content: flex-end; + min-height: 1.2rem; + margin-top: 0.25rem; + color: #8d949e; + font-size: 0.72rem; +} + +.chat-message-status.failed { + color: #df3838; +} + +.chat-message-status .material-icons { + margin-right: 0.25rem; + font-size: 1.15rem; +} + +.chat-relation-notice { + display: flex; + align-items: center; + justify-content: center; + min-height: 1.8rem; + margin: 0.4rem auto 1.5rem; + color: #939aa3; + font-size: 0.82rem; + line-height: 1.5; + text-align: center; +} + +.chat-relation-notice button { + width: auto; + min-width: 0; + height: auto; + min-height: 0; + margin: 0 0 0 0.5rem; + padding: 0; + border: 0; + box-shadow: none; + color: #2683f5; + background: transparent; + font-size: inherit; + text-transform: none; +} + +.chat-request-actions { + display: flex; + justify-content: center; + gap: 0.75rem; + margin: 2rem auto; +} + +.chat-request-actions button { + width: auto; + min-width: 6rem; + height: 2.7rem; + min-height: 2.7rem; + margin: 0; + padding: 0 1.2rem; + border: 1px solid #d9dde3; + border-radius: 0.4rem; + box-shadow: none; + color: #5d646e; + background: #fff; + font-size: 0.9rem; + text-transform: none; +} + +.chat-request-actions button.primary { + border-color: #398afa; + color: #fff; + background: #398afa; +} + +.chat-image-message { + position: relative; + width: 10rem; + aspect-ratio: 3 / 4; + overflow: hidden; + border-radius: 0.5rem; + background: #e2e5e9; +} + +.chat-image-message > img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.chat-upload-progress { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: #fff; + background: rgba(20,24,30,0.4); +} + +.chat-upload-progress progress { + width: 4rem; + height: 0.35rem; + border: 0; + accent-color: #fff; +} + +.chat-upload-progress strong { + margin-top: 0.5rem; + font-size: 0.85rem; +} + +.chat-voice-message { + display: grid; + grid-template-columns: 1.5rem auto 2.2rem; + align-items: center; + min-width: 8rem; + min-height: 3rem; + padding: 0 0.85rem; + border-radius: 0.45rem; + color: #30343b; + background: #fff; + box-shadow: 0 1px 2px rgba(31,39,50,0.06); +} + +.chat-message-row.mine .chat-voice-message { + color: #fff; + background: #398afa; +} + +.chat-voice-message .material-icons { + font-size: 1.3rem; +} + +.chat-voice-message strong { + font-size: 1rem; + font-weight: 500; +} + +.chat-voice-message span { + height: 1rem; + background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px); + opacity: 0.55; +} + +.chat-file-card { + display: grid; + grid-template-columns: minmax(0,1fr) 3.4rem; + gap: 1rem; + width: min(100%, 24rem); + min-width: 17rem; + padding: 1rem; + border-radius: 0.5rem; + background: #fff; + box-shadow: 0 1px 2px rgba(31,39,50,0.06); +} + +.chat-file-card > div { + display: flex; + min-width: 0; + flex-direction: column; +} + +.chat-file-card strong { + overflow: hidden; + color: #30343b; + line-height: 1.45; + text-overflow: ellipsis; +} + +.chat-file-card small { + margin-top: auto; + color: #a1a7af; +} + +.chat-file-icon { + display: grid; + place-items: center; + width: 3.4rem; + height: 3.4rem; + border-radius: 0.35rem; + color: #fff; + background: #f13e67; + font-size: 2rem; + font-weight: 600; +} + +.chat-contact-card { + display: flex; + width: min(100%, 22rem); + min-width: 16rem; + height: auto; + min-height: 0; + margin: 0; + padding: 0; + overflow: hidden; + flex-direction: column; + border: 0; + border-radius: 0.5rem; + box-shadow: 0 1px 2px rgba(31,39,50,0.06); + color: #30343b; + background: #fff; + text-align: left; + text-transform: none; +} + +.chat-contact-card > span { + display: flex; + align-items: center; + width: 100%; + padding: 0.85rem; +} + +.chat-contact-card img { + width: 3rem; + height: 3rem; + margin-right: 0.75rem; + border-radius: 0.45rem; + object-fit: cover; +} + +.chat-contact-card strong { + overflow: hidden; + font-size: 1rem; + text-overflow: ellipsis; + white-space: nowrap; +} + +.chat-contact-card small { + width: calc(100% - 1.7rem); + margin: 0 0.85rem; + padding: 0.65rem 0; + border-top: 1px solid #eceef1; + color: #9da3ac; +} + +.chat-permission-banner { + display: flex; + align-items: center; + justify-content: center; + flex: none; + min-height: 2.5rem; + padding: 0.55rem 1rem; + color: #7e858e; + background: #fff7e8; + font-size: 0.82rem; + text-align: center; +} + +.chat-permission-banner .material-icons { + margin-right: 0.4rem; + color: #dc9221; + font-size: 1.05rem; +} + +.chat-composer { + display: grid; + grid-template-columns: 2.7rem minmax(0,1fr) 2.7rem auto; + align-items: center; + flex: none; + min-height: 4.2rem; + padding: 0.55rem max(0.75rem, calc((100% - 54rem) / 2)); + border-top: 1px solid #e8eaee; + background: #f8f9fa; +} + +.chat-composer > button { + display: grid; + place-items: center; + width: 2.5rem; + min-width: 2.5rem; + height: 2.5rem; + min-height: 2.5rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #555c65; + background: transparent; +} + +.chat-composer > button[disabled] { + color: #b7bcc3; +} + +.chat-composer > button .material-icons { + font-size: 1.45rem; +} + +.chat-composer input { + min-width: 0; + width: 100%; + height: 2.8rem; + margin: 0; + padding: 0 0.8rem; + border: 1px solid #eceef1; + border-radius: 0.4rem; + box-shadow: none; + color: #252931; + background: #fff; + font-size: 0.93rem; +} + +.chat-composer input:focus { + border-color: #4091ff; + box-shadow: 0 0 0 3px rgba(22,119,255,0.08); +} + +.chat-composer input[disabled] { + color: #9da3ab; + background: #f1f2f4; +} + +.chat-composer .chat-send-button { + width: auto; + min-width: 3.8rem; + margin-left: 0.25rem; + padding: 0 0.75rem; + border-radius: 0.35rem; + color: #fff; + background: #398afa; + font-size: 0.82rem; + text-transform: none; +} + +.chat-attachment-panel { + display: grid; + grid-template-columns: repeat(4, minmax(4rem, 1fr)); + gap: 1rem; + flex: none; + min-height: 13rem; + padding: 1rem max(1rem, calc((100% - 48rem) / 2)) max(1rem, env(safe-area-inset-bottom)); + border-top: 1px solid #e3e6ea; + background: #f1f2f4; +} + +.chat-attachment-panel button { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + width: 100%; + height: auto; + min-height: 5.2rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #6d747e; + background: transparent; + text-transform: none; +} + +.chat-attachment-panel button > span { + display: grid; + place-items: center; + width: 3.8rem; + height: 3.8rem; + border-radius: 0.5rem; + color: #4d535b; + background: #fff; +} + +.chat-attachment-panel .material-icons { + font-size: 1.55rem; +} + +.chat-attachment-panel small { + margin-top: 0.45rem; + font-size: 0.78rem; +} + +.chat-toast { + position: fixed; + z-index: 30; + bottom: max(1.5rem, env(safe-area-inset-bottom)); + left: 50%; + max-width: calc(100% - 2rem); + padding: 0.75rem 1.1rem; + border-radius: 0.4rem; + color: #fff; + background: rgba(34,38,45,0.94); + box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.18); + text-align: center; + transform: translateX(-50%); +} + +/* Message composer, media tasks, selection, favorites, and forwarding. */ +#sidepanel.message-composer-panel { + width: 100%; + min-width: 0; + flex: 1 1 auto; + color-scheme: light; + color: #252931; + background: #f4f6f8; +} + +.message-composer-panel * { + box-sizing: border-box; + letter-spacing: 0; +} + +.message-composer-page .chat-product-header span { + margin-top: 0.1rem; +} + +.compose-timeline { + padding-bottom: 2rem; +} + +.compose-avatar { + display: grid; + place-items: center; + width: 2.7rem; + height: 2.7rem; + overflow: hidden; + flex: 0 0 2.7rem; + border-radius: 0.45rem; + color: #fff; + background: #4789dc; +} + +.compose-avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.compose-avatar .material-icons { + font-size: 1.35rem; +} + +.compose-message-row { + display: flex; + align-items: flex-start; + gap: 0.65rem; + width: 100%; + margin-bottom: 1rem; +} + +.compose-message-row.mine { + justify-content: flex-end; +} + +.compose-text-bubble { + position: relative; + max-width: min(70%, 32rem); + min-height: 2.7rem; + padding: 0.7rem 0.9rem; + border-radius: 0.45rem; + background: #fff; + box-shadow: 0 1px 2px rgba(31,39,50,0.06); + line-height: 1.5; + overflow-wrap: anywhere; +} + +.compose-text-bubble.mine { + color: #fff; + background: #398afa; +} + +.compose-mention { + color: #1976d2; + font-weight: 500; +} + +.compose-voice-bubble { + display: grid; + grid-template-columns: 1.5rem minmax(3rem, 8rem) auto; + align-items: center; + gap: 0.4rem; + width: auto; + min-width: 10rem; + height: 3rem; + min-height: 3rem; + margin: 0; + padding: 0 0.85rem; + border: 0; + border-radius: 0.45rem; + box-shadow: 0 1px 2px rgba(31,39,50,0.06); + color: #30343b; + background: #fff; +} + +.compose-voice-bubble.mine { + color: #fff; + background: #398afa; +} + +.compose-voice-bubble > i:last-child { + position: absolute; + width: 0.45rem; + height: 0.45rem; + margin-left: 10.3rem; + border-radius: 50%; + background: #ef3f4d; +} + +.compose-wave { + height: 1rem; + opacity: 0.55; + background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px); +} + +.compose-media-card, +.compose-video-card { + position: relative; + width: 11rem; + aspect-ratio: 4 / 3; + overflow: hidden; + border: 0; + border-radius: 0.45rem; + background: #dfe3e8; +} + +.compose-video-card { + height: auto; + min-height: 0; + margin: 0; + padding: 0; + box-shadow: none; +} + +.compose-media-card > img, +.compose-video-card > img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.compose-video-card > .material-icons { + position: absolute; + top: 50%; + left: 50%; + color: #fff; + font-size: 2.8rem; + filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3)); + transform: translate(-50%, -50%); +} + +.compose-video-card > small { + position: absolute; + right: 0.45rem; + bottom: 0.35rem; + padding: 0.1rem 0.3rem; + border-radius: 0.2rem; + color: #fff; + background: rgba(0,0,0,0.55); +} + +.compose-media-state { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + color: #fff; + background: rgba(25,29,35,0.52); +} + +.compose-media-state .material-icons { + font-size: 1.7rem; +} + +.compose-media-state strong { + margin: 0.3rem 0; + font-size: 0.75rem; +} + +.compose-media-state progress { + width: 5rem; + height: 0.3rem; + accent-color: #fff; +} + +.compose-file-card { + display: grid; + grid-template-columns: 3rem minmax(0, 1fr) 1.7rem; + align-items: center; + gap: 0.8rem; + width: min(25rem, calc(100vw - 8rem)); + min-height: 5rem; + padding: 0.8rem; + border-radius: 0.45rem; + background: #fff; + box-shadow: 0 1px 2px rgba(31,39,50,0.06); +} + +.compose-file-type { + display: grid; + place-items: center; + width: 3rem; + height: 3.4rem; + border-radius: 0.3rem; + color: #fff; + background: #e74664; + font-size: 0.72rem; + font-weight: 700; +} + +.compose-file-card > div, +.compose-upload-list > div > div { + display: flex; + min-width: 0; + flex-direction: column; +} + +.compose-file-card strong, +.compose-upload-list strong { + overflow: hidden; + color: #30343b; + text-overflow: ellipsis; + white-space: nowrap; +} + +.compose-file-card small, +.compose-upload-list small { + margin-top: 0.35rem; + color: #9097a0; +} + +.compose-file-card progress, +.compose-upload-list progress { + width: 100%; + height: 0.3rem; + margin-top: 0.35rem; + accent-color: #398afa; +} + +.compose-toolbar { + display: grid; + grid-template-columns: 2.8rem minmax(0, 1fr) 2.8rem auto; + align-items: center; + min-height: 4.2rem; + padding: 0.55rem max(0.6rem, calc((100% - 54rem) / 2)); + border-top: 1px solid #e4e7eb; + background: #f8f9fa; +} + +.compose-toolbar > button { + display: grid; + place-items: center; + width: 2.6rem; + min-width: 2.6rem; + height: 2.6rem; + min-height: 2.6rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #555c65; + background: transparent; +} + +.compose-toolbar input { + width: 100%; + min-width: 0; + height: 2.8rem; + margin: 0; + padding: 0 0.8rem; + border: 1px solid #e4e7eb; + border-radius: 0.35rem; + box-shadow: none; + color: #252931; + background: #fff; +} + +.compose-toolbar .compose-send, +.compose-upload-page footer button, +.compose-target-footer button, +.compose-confirm-send { + width: auto; + min-width: 3.8rem; + padding: 0 0.85rem; + border: 0; + border-radius: 0.35rem; + color: #fff; + background: #398afa; + text-transform: none; +} + +.compose-toolbar .compose-hold-button { + width: 100%; + color: #30343b; + border: 1px solid #e1e4e8; + background: #fff; + font-size: 0.92rem; +} + +.compose-emoji-panel { + position: relative; + flex: none; + min-height: 14rem; + padding: 0 1rem max(1rem, env(safe-area-inset-bottom)); + border-top: 1px solid #e2e5e9; + background: #f4f5f7; +} + +.compose-emoji-panel nav { + display: flex; + gap: 0.25rem; + height: 3rem; + border-bottom: 1px solid #e1e4e8; +} + +.compose-emoji-panel nav button, +.compose-emoji-delete { + width: 3rem; + min-width: 3rem; + height: 3rem; + min-height: 3rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #7d848d; + background: transparent; +} + +.compose-emoji-panel nav button.active { + color: #398afa; + border-bottom: 2px solid #398afa; +} + +.compose-emoji-panel > div { + display: grid; + grid-template-columns: repeat(9, minmax(2.5rem, 1fr)); + gap: 0.35rem; + max-width: 52rem; + padding: 0.8rem 0; + margin: auto; +} + +.compose-emoji-panel > div button { + display: grid; + place-items: center; + width: 100%; + min-width: 2.5rem; + height: 2.5rem; + min-height: 2.5rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + background: transparent; + font-size: 1.4rem; +} + +.compose-emoji-delete { + position: absolute; + right: 1rem; + bottom: max(0.5rem, env(safe-area-inset-bottom)); + border-radius: 0.3rem; + background: #fff; +} + +.compose-record-overlay { + position: fixed; + z-index: 20; + top: 50%; + left: 50%; + display: flex; + align-items: center; + justify-content: center; + width: 12rem; + min-height: 11rem; + padding: 1.2rem; + border-radius: 0.5rem; + color: #fff; + background: rgba(34,39,47,0.9); + box-shadow: 0 1rem 3rem rgba(0,0,0,0.24); + flex-direction: column; + transform: translate(-50%, -50%); +} + +.compose-record-overlay.cancel { + background: rgba(204,55,62,0.94); +} + +.compose-record-overlay > .material-icons { + font-size: 3rem; +} + +.compose-record-overlay strong { + margin-top: 0.65rem; + font-size: 0.8rem; +} + +.compose-record-overlay small { + margin-top: 0.35rem; + opacity: 0.8; +} + +.compose-meter { + display: flex; + align-items: center; + gap: 0.18rem; + height: 1.8rem; + margin-top: 0.4rem; +} + +.compose-meter i { + width: 0.18rem; + border-radius: 0.1rem; + background: #fff; +} + +.compose-picker-page, +.compose-forward-page, +.compose-upload-page { + display: flex; + width: 100%; + min-height: 100%; + flex-direction: column; + color: #252931; + background: #f6f7f9; +} + +.compose-picker-header { + display: grid; + grid-template-columns: 4.5rem minmax(0, 1fr) 4.5rem; + align-items: center; + min-height: 4.5rem; + padding-top: env(safe-area-inset-top); + border-bottom: 1px solid #ebedf0; + background: #fff; +} + +.compose-picker-header h1 { + margin: 0; + font-size: 1.12rem; + text-align: center; +} + +.compose-picker-header button { + width: 100%; + min-width: 0; + height: 3.2rem; + min-height: 3.2rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #30343b; + background: transparent; +} + +.compose-picker-header button.text { + color: #287fe5; + font-size: 0.88rem; + text-transform: none; +} + +.compose-picker-header button[disabled] { + color: #b4bac1; +} + +.compose-search { + display: flex; + align-items: center; + height: 2.8rem; + margin: 0.8rem max(1rem, calc((100% - 48rem) / 2)); + padding: 0 0.75rem; + border-radius: 0.35rem; + color: #949ba4; + background: #fff; +} + +.compose-search .material-icons { + font-size: 1.25rem; +} + +.compose-search input { + width: 100%; + min-width: 0; + height: 100%; + margin: 0; + padding: 0 0.55rem; + border: 0; + box-shadow: none; + background: transparent; +} + +.compose-section-title { + width: min(100%, 48rem); + margin: 0 auto; + padding: 0.5rem 1rem; + color: #8d949d; + font-size: 0.78rem; +} + +.compose-picker-list { + width: min(100%, 48rem); + margin: 0 auto; + background: #fff; +} + +.compose-picker-list > button { + display: grid; + grid-template-columns: 3rem minmax(0, 1fr) 2rem; + align-items: center; + gap: 0.75rem; + width: 100%; + min-width: 0; + min-height: 4.4rem; + margin: 0; + padding: 0.55rem 1rem; + border: 0; + border-bottom: 1px solid #eef0f2; + border-radius: 0; + box-shadow: none; + color: #252931; + background: #fff; + text-align: left; + text-transform: none; +} + +.compose-picker-list > button > span:nth-child(2) { + display: flex; + min-width: 0; + flex-direction: column; +} + +.compose-picker-list strong { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.compose-picker-list small { + margin-top: 0.2rem; + color: #969da6; + font-size: 0.76rem; +} + +.compose-checkbox, +.compose-check { + display: grid; + place-items: center; + width: 1.4rem; + height: 1.4rem; + border: 1px solid #c9ced4; + border-radius: 50%; + color: #fff; + background: #fff; +} + +.compose-checkbox.checked, +.compose-check.checked { + border-color: #398afa; + background: #398afa; +} + +.compose-checkbox .material-icons, +.compose-check .material-icons { + font-size: 0.95rem; +} + +.compose-select-row { + display: flex; + align-items: flex-start; + width: 100%; +} + +.compose-select-row.selectable { + gap: 0.7rem; +} + +.compose-select-row.selectable .compose-message-row { + width: calc(100% - 2.2rem); +} + +.compose-check { + flex: 0 0 1.4rem; + min-width: 1.4rem; + min-height: 1.4rem; + margin: 0.65rem 0 0; + padding: 0; + box-shadow: none; +} + +.compose-selection-bar { + display: grid; + grid-template-columns: 4rem 1fr 5rem; + align-items: center; + min-height: 3.2rem; + border-bottom: 1px solid #e6e9ed; + background: #fff; + text-align: center; +} + +.compose-selection-bar button { + width: 100%; + min-width: 0; + min-height: 2.8rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #398afa; + background: transparent; + font-size: 0.78rem; + text-transform: none; +} + +.compose-batch-actions { + display: grid; + grid-template-columns: repeat(3, 1fr); + flex: none; + min-height: 4.6rem; + padding-bottom: env(safe-area-inset-bottom); + border-top: 1px solid #e3e6ea; + background: #fff; +} + +.compose-batch-actions button { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + min-width: 0; + min-height: 4.2rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #515862; + background: transparent; + flex-direction: column; + text-transform: none; +} + +.compose-batch-actions button[disabled] { + color: #b8bdc4; +} + +.compose-batch-actions span { + margin-top: 0.25rem; + font-size: 0.72rem; +} + +.compose-upload-page > main { + width: min(100%, 48rem); + min-height: 0; + margin: 0 auto; + padding: 1.2rem; + overflow-y: auto; + flex: 1 1 auto; +} + +.compose-upload-drop { + display: flex; + align-items: center; + justify-content: center; + min-height: 11rem; + border: 1px dashed #b9c4d1; + border-radius: 0.45rem; + color: #4f5863; + background: #fff; + cursor: pointer; + flex-direction: column; +} + +.compose-upload-drop input { + position: absolute; + width: 1px; + height: 1px; + opacity: 0; +} + +.compose-upload-drop .material-icons { + margin-bottom: 0.5rem; + color: #398afa; + font-size: 2.6rem; +} + +.compose-upload-drop small { + margin-top: 0.35rem; + color: #9299a2; +} + +.compose-upload-list h2, +.compose-forward-confirm h2 { + margin: 1.4rem 0 0.7rem; + font-size: 0.92rem; +} + +.compose-upload-list > div { + display: grid; + grid-template-columns: 3rem minmax(0, 1fr) 2rem; + align-items: center; + gap: 0.8rem; + padding: 0.8rem; + border-bottom: 1px solid #eceef1; + background: #fff; +} + +.compose-upload-list button { + width: 2rem; + min-width: 2rem; + height: 2rem; + min-height: 2rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + background: transparent; +} + +.compose-upload-page > footer, +.compose-target-footer { + display: flex; + align-items: center; + justify-content: flex-end; + min-height: 4.5rem; + padding: 0.6rem max(1rem, calc((100% - 48rem) / 2)); + border-top: 1px solid #e3e6ea; + background: #fff; +} + +.compose-upload-page footer button, +.compose-target-footer button { + height: 2.8rem; + min-height: 2.8rem; + margin: 0; +} + +/* Contact relationships and group governance. */ +#sidepanel.contact-management-panel, +#sidepanel.group-management-panel { + width: 100%; + min-width: 0; + flex: 1 1 auto; + color-scheme: light; + color: #252931; + background: #f5f6f8; +} + +.contact-management-panel *, +.group-management-panel * { + box-sizing: border-box; + letter-spacing: 0; +} + +.people-page, +.group-page { + display: flex; + position: relative; + width: 100%; + min-height: 100%; + overflow: hidden; + flex-direction: column; + background: #f5f6f8; +} + +.people-header, +.group-header, +.group-chat-header { + display: grid; + z-index: 3; + grid-template-columns: 4.5rem minmax(0, 1fr) 4.5rem; + align-items: center; + flex: none; + min-height: 4.5rem; + padding-top: env(safe-area-inset-top); + border-bottom: 1px solid #e9ebee; + background: #fff; +} + +.people-header h1, +.group-header h1, +.group-chat-header h1 { + margin: 0; + overflow: hidden; + font-size: 1.15rem; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; +} + +.people-header > button, +.group-header > button, +.group-chat-header > button { + display: grid; + place-items: center; + width: 100%; + min-width: 0; + height: 3.2rem; + min-height: 3.2rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #2e333a; + background: transparent; +} + +.people-header > button.text, +.group-header > button.text { + color: #247ee6; + font-size: 0.86rem; + text-transform: none; +} + +.people-search, +.group-search { + display: flex; + align-items: center; + flex: none; + height: 2.8rem; + margin: 0.8rem max(1rem, calc((100% - 50rem) / 2)); + padding: 0 0.75rem; + border-radius: 0.35rem; + color: #9299a2; + background: #fff; +} + +.people-search .material-icons, +.group-search .material-icons { + font-size: 1.2rem; +} + +.people-search input, +.group-search input { + width: 100%; + min-width: 0; + height: 100%; + margin: 0; + padding: 0 0.5rem; + border: 0; + box-shadow: none; + background: transparent; +} + +.people-avatar, +.group-avatar { + display: grid; + place-items: center; + width: 3rem; + height: 3rem; + overflow: hidden; + flex: 0 0 3rem; + border-radius: 0.45rem; + color: #fff; + background: #4389df; +} + +.people-avatar img, +.group-avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.people-avatar .material-icons, +.group-avatar .material-icons { + font-size: 1.45rem; +} + +.people-scroll, +.people-page > main, +.group-page > main { + min-height: 0; + overflow-y: auto; + flex: 1 1 auto; +} + +.people-entry-list, +.people-group, +.people-add-actions, +.people-settings > section, +.group-settings > section, +.group-governance > section { + width: min(100%, 50rem); + margin: 0 auto 0.8rem; + background: #fff; +} + +.people-entry-list > button { + display: grid; + grid-template-columns: 3rem minmax(0, 1fr) auto 1.5rem; + align-items: center; + gap: 0.75rem; + width: 100%; + min-height: 4.3rem; + margin: 0; + padding: 0.55rem 1rem; + border: 0; + border-bottom: 1px solid #eef0f2; + border-radius: 0; + box-shadow: none; + color: #2d3239; + background: #fff; + text-align: left; + text-transform: none; +} + +.people-entry-list em { + display: grid; + place-items: center; + min-width: 1.2rem; + height: 1.2rem; + padding: 0 0.35rem; + border-radius: 0.6rem; + color: #fff; + background: #ef4653; + font-size: 0.7rem; + font-style: normal; +} + +.people-group h2 { + margin: 0; + padding: 0.45rem 1rem; + color: #868d97; + background: #f5f6f8; + font-size: 0.78rem; +} + +.people-group > button { + display: flex; + align-items: center; + gap: 0.8rem; + width: 100%; + min-height: 4.2rem; + margin: 0; + padding: 0.55rem 1rem; + border: 0; + border-bottom: 1px solid #eef0f2; + border-radius: 0; + box-shadow: none; + color: #2d3239; + background: #fff; + text-align: left; + text-transform: none; +} + +.people-group > button > span:nth-child(2), +.people-request-list article > div, +.people-block-list article > span, +.people-search-result button > span, +.people-add-actions button > span, +.group-list button > span, +.group-request-list article > div, +.group-admin-page article > span, +.group-muted-list article > span { + display: flex; + min-width: 0; + flex-direction: column; + flex: 1 1 auto; +} + +.people-group small, +.people-request-list small, +.people-block-list small, +.people-search-result small, +.people-add-actions small, +.group-list small, +.group-request-list small, +.group-admin-page small, +.group-muted-list small { + margin-top: 0.2rem; + color: #9299a2; + font-size: 0.75rem; +} + +.people-index { + position: absolute; + z-index: 2; + top: 13rem; + right: 0.35rem; + display: flex; + gap: 0.2rem; + flex-direction: column; +} + +.people-index a { + color: #6a727d; + font-size: 0.68rem; + text-decoration: none; +} + +.people-request-list, +.people-block-list, +.group-request-list, +.group-muted-list, +.group-admin-page { + width: min(100%, 50rem); + margin: 0 auto; + background: #fff; +} + +.people-request-list article, +.people-block-list article, +.group-request-list article, +.group-admin-page article, +.group-muted-list article { + display: flex; + align-items: center; + gap: 0.75rem; + min-height: 5.2rem; + padding: 0.7rem 1rem; + border-bottom: 1px solid #eceef1; +} + +.people-request-list p, +.group-request-list p { + max-width: 24rem; + margin: 0.2rem 0; + overflow: hidden; + color: #69717b; + font-size: 0.8rem; + text-overflow: ellipsis; + white-space: nowrap; +} + +.people-request-list article > span, +.group-request-list article > span { + display: flex; + gap: 0.4rem; +} + +.people-request-list button, +.people-block-list button, +.group-request-list button, +.group-admin-page article button, +.group-muted-list button { + width: auto; + min-width: 3.3rem; + height: 2.1rem; + min-height: 2.1rem; + margin: 0; + padding: 0 0.65rem; + border: 1px solid #d8dce1; + border-radius: 0.3rem; + box-shadow: none; + color: #69717b; + background: #fff; + font-size: 0.76rem; + text-transform: none; +} + +.people-request-list button.primary, +.group-request-list button.primary { + border-color: #398afa; + color: #fff; + background: #398afa; +} + +.people-request-list em, +.group-request-list em { + color: #969da5; + font-size: 0.78rem; + font-style: normal; +} + +.people-add-actions { + margin-top: 0.5rem; +} + +.people-add-actions button { + display: grid; + grid-template-columns: 2.7rem minmax(0, 1fr) 1.5rem; + align-items: center; + gap: 0.7rem; + width: 100%; + min-height: 4.4rem; + margin: 0; + padding: 0.65rem 1rem; + border: 0; + border-bottom: 1px solid #eceef1; + border-radius: 0; + box-shadow: none; + color: #2d3239; + background: #fff; + text-align: left; + text-transform: none; +} + +.people-add-actions button > .material-icons:first-child { + color: #398afa; + font-size: 1.7rem; +} + +.people-my-account { + color: #9299a2; + font-size: 0.8rem; + text-align: center; +} + +.people-search-result { + width: min(100%, 50rem); + margin: 0 auto; +} + +.people-search-result h2 { + padding: 0 1rem; + color: #8b929b; + font-size: 0.78rem; +} + +.people-search-result button { + display: flex; + align-items: center; + gap: 0.8rem; + width: 100%; + min-height: 4.7rem; + margin: 0; + padding: 0.7rem 1rem; + border: 0; + box-shadow: none; + color: #2d3239; + background: #fff; + text-align: left; + text-transform: none; +} + +.people-search-result em { + padding: 0.4rem 0.8rem; + border-radius: 0.3rem; + color: #fff; + background: #398afa; + font-size: 0.78rem; + font-style: normal; +} + +.people-qr-page main, +.group-qr-page main { + display: flex; + align-items: center; + justify-content: center; + padding: 2rem 1rem; + flex-direction: column; +} + +.people-qr-card, +.group-qr-card { + width: min(100%, 23rem); + padding: 1.4rem; + border-radius: 0.45rem; + background: #fff; + box-shadow: 0 0.8rem 2.2rem rgba(35,43,54,0.1); + text-align: center; +} + +.people-qr-profile, +.group-qr-card > div:first-child { + display: flex; + align-items: center; + gap: 0.75rem; + text-align: left; +} + +.people-qr-profile > span:nth-child(2), +.group-qr-card > div:first-child > span:nth-child(2) { + display: flex; + flex-direction: column; +} + +.people-qr-profile small, +.group-qr-card small { + margin-top: 0.2rem; + color: #8f969f; +} + +.people-qrcode, +.group-qrcode { + width: 190px; + height: 190px; + margin: 1.5rem auto 1rem; +} + +.people-qrcode img, +.group-qrcode img { + width: 100%; + height: 100%; +} + +.people-qr-card p, +.group-qr-card p { + margin: 0.6rem 0 0; +} + +.people-qr-actions, +.group-qr-actions { + display: flex; + gap: 1rem; + margin-top: 1.5rem; +} + +.people-qr-actions button, +.group-qr-actions button { + display: flex; + align-items: center; + justify-content: center; + width: 8.5rem; + min-width: 0; + min-height: 2.8rem; + margin: 0; + border: 0; + border-radius: 0.35rem; + box-shadow: none; + color: #3b424b; + background: #fff; + text-transform: none; +} + +.people-qr-actions .material-icons, +.group-qr-actions .material-icons { + margin-right: 0.4rem; + font-size: 1.2rem; +} + +.people-verify, +.people-profile { + width: min(100%, 42rem); + margin: 0 auto; + padding: 2rem 1rem; + text-align: center; +} + +.people-verify > .people-avatar { + width: 4.5rem; + height: 4.5rem; + margin: 0 auto; +} + +.people-verify h2 { + margin: 0.8rem 0 1.8rem; +} + +.people-verify label { + display: flex; + padding: 1rem; + background: #fff; + text-align: left; + flex-direction: column; +} + +.people-verify textarea { + min-height: 7rem; + margin: 0.7rem 0; + padding: 0.7rem; + border: 1px solid #e3e6ea; + border-radius: 0.35rem; + box-shadow: none; + resize: vertical; +} + +.people-verify label small { + color: #989fa7; + text-align: right; +} + +.people-primary { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + min-height: 3rem; + margin: 1.2rem 0 0; + border: 0; + border-radius: 0.35rem; + box-shadow: none; + color: #fff; + background: #398afa; + text-transform: none; +} + +.people-primary .material-icons { + margin-right: 0.4rem; +} + +.people-profile > section:first-child { + display: grid; + grid-template-columns: 4.5rem minmax(0, 1fr) 2rem; + align-items: center; + gap: 1rem; + padding: 1.2rem; + background: #fff; + text-align: left; +} + +.people-profile > section:first-child .people-avatar { + width: 4.5rem; + height: 4.5rem; +} + +.people-profile h2, +.people-profile p { + margin: 0.2rem 0; +} + +.people-profile p { + color: #858c95; + font-size: 0.82rem; +} + +.people-profile dl { + margin: 0.8rem 0; + padding: 0 1rem; + background: #fff; + text-align: left; +} + +.people-profile dl > div { + display: grid; + grid-template-columns: 6rem 1fr; + padding: 0.9rem 0; + border-bottom: 1px solid #eef0f2; +} + +.people-profile dt, +.people-profile dd { + margin: 0; +} + +.people-profile dd { + color: #707883; +} + +.people-profile-actions { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.8rem; +} + +.people-profile-actions button { + min-height: 3rem; + margin: 0; + border: 1px solid #dce0e5; + border-radius: 0.35rem; + box-shadow: none; + color: #398afa; + background: #fff; + text-transform: none; +} + +.people-profile-actions button.people-primary { + border-color: #398afa; + color: #fff; + background: #398afa; +} + +.people-settings, +.group-settings, +.group-governance { + padding: 0.8rem 0 2rem; +} + +.people-settings-profile { + display: flex; + align-items: center; + gap: 0.8rem; + padding: 0.8rem 1rem; +} + +.people-settings section > button, +.people-settings section > div, +.group-settings section > button, +.group-settings section > div, +.group-governance section > button, +.group-governance section > div, +.group-profile > button, +.group-profile > label { + display: flex; + align-items: center; + width: 100%; + min-height: 3.7rem; + margin: 0; + padding: 0.65rem 1rem; + border: 0; + border-bottom: 1px solid #eceef1; + border-radius: 0; + box-shadow: none; + color: #30353c; + background: #fff; + text-align: left; + text-transform: none; +} + +.people-settings section > button > span, +.people-settings section > div > span, +.group-settings section > button > span, +.group-settings section > div > span, +.group-governance section > button > span { + flex: 1 1 auto; +} + +.people-settings section small, +.group-settings section small { + margin-left: auto; + color: #949ba4; +} + +.people-switch, +.group-switch { + position: relative; + width: 2.8rem; + min-width: 2.8rem; + height: 1.55rem; + min-height: 1.55rem; + margin: 0; + padding: 0; + border: 0; + border-radius: 0.8rem; + box-shadow: none; + background: #c7ccd2; +} + +.people-switch i, +.group-switch i { + position: absolute; + top: 0.15rem; + left: 0.15rem; + width: 1.25rem; + height: 1.25rem; + border-radius: 50%; + background: #fff; + transition: transform 0.18s ease; +} + +.people-switch.checked, +.group-switch.checked { + background: #398afa; +} + +.people-switch.checked i, +.group-switch.checked i { + transform: translateX(1.25rem); +} + +.people-danger, +.group-danger { + display: block; + width: min(calc(100% - 2rem), 48rem); + min-height: 3rem; + margin: 1rem auto; + border: 0; + border-radius: 0.35rem; + box-shadow: none; + color: #df3f48; + background: #fff; + text-transform: none; +} + +.people-empty, +.group-empty { + display: flex; + align-items: center; + justify-content: center; + min-height: 23rem; + color: #8d949d; + flex-direction: column; + text-align: center; +} + +.people-empty .material-icons, +.group-empty > .material-icons { + margin-bottom: 0.8rem; + color: #b3bac2; + font-size: 4rem; +} + +.people-sheet-backdrop, +.group-sheet-backdrop, +.group-modal-backdrop { + position: absolute; + z-index: 20; + inset: 0; + display: flex; + align-items: flex-end; + justify-content: center; + background: rgba(28,33,40,0.44); +} + +.people-confirm-sheet, +.group-source-sheet, +.group-confirm-sheet { + width: min(100%, 36rem); + padding: 1.2rem; + border-radius: 0.5rem 0.5rem 0 0; + background: #fff; + text-align: center; +} + +.people-confirm-sheet > i { + display: block; + width: 2.5rem; + height: 0.25rem; + margin: 0 auto 1rem; + border-radius: 0.2rem; + background: #d6dae0; +} + +.people-confirm-sheet h2, +.group-source-sheet h2, +.group-confirm-sheet h2 { + margin: 0.2rem 0 0.8rem; + font-size: 1.08rem; +} + +.people-confirm-sheet p, +.group-confirm-sheet p { + color: #757d87; + line-height: 1.6; +} + +.people-confirm-sheet button, +.group-source-sheet button, +.group-confirm-sheet button { + width: 100%; + min-height: 3rem; + margin: 0.45rem 0 0; + border: 0; + border-radius: 0.35rem; + box-shadow: none; + color: #31363d; + background: #f2f3f5; + text-transform: none; +} + +.people-confirm-sheet button.danger, +.group-confirm-sheet button.danger { + color: #fff; + background: #e3444d; +} + +.group-source-sheet button { + display: flex; + align-items: center; + justify-content: center; +} + +.group-source-sheet button .material-icons { + margin-right: 0.5rem; +} + +.group-tabs { + display: grid; + grid-template-columns: repeat(3, 1fr); + width: min(100%, 50rem); + margin: 0 auto; + border-bottom: 1px solid #e4e7eb; + background: #fff; +} + +.group-tabs button { + min-height: 2.8rem; + margin: 0; + padding: 0; + border: 0; + border-bottom: 2px solid transparent; + border-radius: 0; + box-shadow: none; + color: #747c86; + background: transparent; + font-size: 0.8rem; + text-transform: none; +} + +.group-tabs button.active { + border-bottom-color: #398afa; + color: #247ee6; +} + +.group-list { + width: min(100%, 50rem); + margin: 0 auto; + background: #fff; +} + +.group-list > button { + display: grid; + grid-template-columns: 3.2rem minmax(0, 1fr) 1.5rem; + align-items: center; + gap: 0.8rem; + width: 100%; + min-height: 4.7rem; + margin: 0; + padding: 0.7rem 1rem; + border: 0; + border-bottom: 1px solid #eceef1; + border-radius: 0; + box-shadow: none; + color: #30353c; + background: #fff; + text-align: left; + text-transform: none; +} + +.group-empty p { + max-width: 19rem; + margin: 0.5rem auto 1rem; + line-height: 1.5; +} + +.group-empty button { + width: auto; + min-height: 2.7rem; + margin: 0; + padding: 0 1rem; + border: 0; + border-radius: 0.35rem; + box-shadow: none; + color: #fff; + background: #398afa; + text-transform: none; +} + +.group-modal-backdrop { + align-items: center; +} + +.group-modal { + width: min(calc(100% - 2rem), 28rem); + padding: 1.2rem; + border-radius: 0.5rem; + background: #fff; +} + +.group-modal h2 { + margin: 0 0 1rem; + font-size: 1.1rem; +} + +.group-modal label { + display: flex; + flex-direction: column; +} + +.group-modal input { + height: 2.8rem; + margin: 0.5rem 0; + padding: 0 0.7rem; + border: 1px solid #dce0e5; + border-radius: 0.35rem; + box-shadow: none; +} + +.group-modal p { + color: #858c96; + font-size: 0.78rem; +} + +.group-modal footer { + display: flex; + justify-content: flex-end; + gap: 0.6rem; +} + +.group-modal footer button { + width: auto; + min-width: 4.5rem; + min-height: 2.6rem; + margin: 0; + border: 0; + border-radius: 0.3rem; + box-shadow: none; + color: #59616b; + background: #eef0f2; + text-transform: none; +} + +.group-modal footer button.primary { + color: #fff; + background: #398afa; +} + +.group-chat-header { + grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem; +} + +.group-chat-header > div { + text-align: center; +} + +.group-chat-header small { + color: #8c939c; +} + +.group-top-notice { + display: grid; + grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; + align-items: center; + gap: 0.6rem; + width: min(100%, 54rem); + min-height: 3.7rem; + margin: 0 auto; + padding: 0.5rem 1rem; + border: 0; + border-bottom: 1px solid #e8eaed; + border-radius: 0; + box-shadow: none; + color: #30353c; + background: #fff; + text-align: left; + text-transform: none; +} + +.group-top-notice > .material-icons:first-child { + color: #398afa; +} + +.group-top-notice.announcement > .material-icons:first-child { + color: #f29b38; +} + +.group-top-notice span { + display: flex; + min-width: 0; + flex-direction: column; +} + +.group-top-notice small { + margin-top: 0.15rem; + overflow: hidden; + color: #8d949d; + font-size: 0.75rem; + text-overflow: ellipsis; + white-space: nowrap; +} + +.group-chat-timeline { + width: 100%; + min-height: 0; + padding: 1.5rem max(1rem, calc((100% - 54rem) / 2)); + overflow-y: auto; + flex: 1 1 auto; +} + +.group-system-event { + width: fit-content; + max-width: 80%; + margin: 0.8rem auto; + padding: 0.35rem 0.6rem; + border-radius: 0.3rem; + color: #878e97; + background: #e8eaed; + font-size: 0.75rem; + text-align: center; +} + +.group-chat-message { + display: flex; + gap: 0.7rem; + margin-top: 1rem; +} + +.group-chat-message > div { + max-width: 70%; +} + +.group-chat-message > div > span { + color: #7d858f; + font-size: 0.75rem; +} + +.group-chat-message em { + margin-left: 0.35rem; + padding: 0.08rem 0.3rem; + border-radius: 0.2rem; + color: #247ee6; + background: #eaf3ff; + font-size: 0.65rem; + font-style: normal; +} + +.group-chat-message.owner em { + color: #d57b17; + background: #fff1df; +} + +.group-chat-message p { + margin: 0.3rem 0 0; + padding: 0.7rem 0.9rem; + border-radius: 0.4rem; + background: #fff; + line-height: 1.5; +} + +.group-chat-composer { + display: grid; + grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem 2.6rem; + align-items: center; + flex: none; + min-height: 4rem; + padding: 0.5rem max(0.5rem, calc((100% - 54rem) / 2)); + border-top: 1px solid #e2e5e9; + background: #f8f9fa; +} + +.group-chat-composer button { + width: 2.5rem; + min-width: 2.5rem; + height: 2.5rem; + min-height: 2.5rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + background: transparent; +} + +.group-chat-composer input { + height: 2.7rem; + margin: 0; + padding: 0 0.7rem; + border: 1px solid #e1e4e8; + border-radius: 0.35rem; + box-shadow: none; + background: #fff; +} + +.group-invite-card { + width: min(100%, 23rem); + margin: 3rem auto; + padding: 1rem; + border-radius: 0.45rem; + background: #fff; + box-shadow: 0 0.5rem 1.5rem rgba(34,42,52,0.08); +} + +.group-invite-card > div { + display: flex; + align-items: center; + gap: 0.8rem; +} + +.group-invite-card > div > span { + display: flex; + flex-direction: column; +} + +.group-invite-card small, +.group-invite-card p { + color: #858c95; +} + +.group-invite-card button { + width: 100%; + min-height: 2.8rem; + margin: 0.8rem 0 0; + border: 0; + border-radius: 0.35rem; + box-shadow: none; + color: #fff; + background: #398afa; + text-transform: none; +} + +.group-invite-card button[disabled] { + color: #7e858e; + background: #e8eaed; +} + +.group-announcement-detail { + width: min(100%, 42rem); + margin: 0 auto; + padding: 2rem 1.2rem; + background: #fff; +} + +.group-announcement-detail > .material-icons { + color: #f19b38; + font-size: 2.5rem; +} + +.group-announcement-detail h2 { + margin: 0.7rem 0 1.2rem; +} + +.group-announcement-detail > p { + color: #555d67; + line-height: 1.8; +} + +.group-announcement-detail footer { + display: flex; + align-items: center; + gap: 0.7rem; + margin-top: 2rem; + padding-top: 1rem; + border-top: 1px solid #eceef1; +} + +.group-announcement-detail footer > span { + display: flex; + flex-direction: column; +} + +.group-announcement-detail > small { + display: block; + margin-top: 1rem; + color: #3a8aec; +} + +.group-member-strip { + display: flex; + align-items: flex-start; + padding: 1rem; +} + +.group-member-strip > div { + display: flex; + gap: 0.8rem; + overflow-x: auto; + flex: 1 1 auto; +} + +.group-member-strip button { + display: flex; + align-items: center; + width: 3.2rem; + min-width: 3.2rem; + height: auto; + min-height: 0; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #68707a; + background: transparent; + flex-direction: column; + text-transform: none; +} + +.group-member-strip button > small { + width: 100%; + margin-top: 0.3rem; + overflow: hidden; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; +} + +.group-profile { + width: min(100%, 50rem); + margin: 0 auto; + padding-top: 0.8rem; +} + +.group-profile > button, +.group-profile > label { + gap: 0.7rem; +} + +.group-profile > button > span, +.group-profile > label > span { + min-width: 6rem; +} + +.group-profile > button > small, +.group-profile > label > input { + min-width: 0; + margin-left: auto; + overflow: hidden; + color: #818892; + text-overflow: ellipsis; + white-space: nowrap; +} + +.group-profile > label > input { + width: 100%; + height: 2.5rem; + margin: 0; + padding: 0 0.5rem; + border: 0; + box-shadow: none; + text-align: right; +} + +.group-profile-avatar .group-avatar { + width: 3.5rem; + height: 3.5rem; +} + +.group-profile > p { + padding: 0.7rem 1rem; + color: #8c939c; + font-size: 0.76rem; +} + +.group-edit-text { + width: min(100%, 42rem); + margin: 0 auto; + padding: 1rem; +} + +.group-edit-text input, +.group-edit-text textarea { + width: 100%; + margin: 0; + padding: 0.8rem; + border: 1px solid #e1e4e8; + border-radius: 0.35rem; + box-shadow: none; + background: #fff; +} + +.group-edit-text input { + height: 3rem; +} + +.group-edit-text textarea { + min-height: 10rem; + resize: vertical; +} + +.group-edit-text > small { + display: block; + margin-top: 0.4rem; + color: #969da6; + text-align: right; +} + +.group-edit-text p { + color: #878e98; + font-size: 0.78rem; +} + +.group-governance section > div > span { + display: flex; + flex-direction: column; + flex: 1 1 auto; +} + +.group-governance section > div > span small { + margin-top: 0.2rem; + color: #9299a2; + font-size: 0.72rem; +} + +.group-admin-page { + padding-bottom: 1rem; +} + +.group-admin-page aside { + display: flex; + gap: 0.6rem; + margin: 0; + padding: 0.8rem 1rem; + color: #7a828c; + background: #eef5ff; + font-size: 0.78rem; + line-height: 1.5; +} + +.group-admin-page aside .material-icons { + color: #398afa; + font-size: 1.2rem; +} + +.group-admin-page aside p { + margin: 0; +} + +.group-admin-page h2 { + margin: 0; + padding: 0.7rem 1rem; + color: #8a929b; + background: #f5f6f8; + font-size: 0.78rem; +} + +.group-inline-empty { + padding: 2rem; + color: #969da5; + text-align: center; +} + +.group-member-picker { + width: min(100%, 50rem); + margin: 0 auto; + background: #fff; +} + +.group-member-picker > button { + display: grid; + grid-template-columns: 3rem minmax(0, 1fr) 1.5rem; + align-items: center; + gap: 0.8rem; + width: 100%; + min-height: 4.5rem; + margin: 0; + padding: 0.6rem 1rem; + border: 0; + border-bottom: 1px solid #eceef1; + border-radius: 0; + box-shadow: none; + color: #30353c; + background: #fff; + text-align: left; + text-transform: none; +} + +.group-member-picker > button > span:nth-child(2) { + display: flex; + flex-direction: column; +} + +.group-member-picker small { + margin-top: 0.2rem; + color: #9299a2; +} + +.group-check { + display: grid; + place-items: center; + width: 1.4rem; + height: 1.4rem; + border: 1px solid #c8cdd3; + border-radius: 50%; + color: #fff; +} + +.group-check.checked { + border-color: #398afa; + background: #398afa; +} + +.group-check .material-icons { + font-size: 0.95rem; +} + +.group-file-list { + width: min(100%, 54rem); + margin: 0 auto; + background: #fff; +} + +.group-file-list article { + display: grid; + grid-template-columns: 3rem minmax(0, 1fr) 2.5rem; + align-items: center; + gap: 0.8rem; + min-height: 5rem; + padding: 0.7rem 1rem; + border-bottom: 1px solid #eceef1; +} + +.group-file-type { + display: grid; + place-items: center; + width: 3rem; + height: 3.4rem; + border-radius: 0.3rem; + color: #fff; + background: #e54b68; + font-size: 0.7rem; + font-weight: 700; +} + +.group-file-list article > div { + display: flex; + min-width: 0; + flex-direction: column; +} + +.group-file-list strong { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.group-file-list small { + margin-top: 0.3rem; + color: #9299a2; + font-size: 0.74rem; +} + +.group-file-list progress { + width: 100%; + height: 0.3rem; + margin-top: 0.4rem; + accent-color: #398afa; +} + +.group-file-list button { + width: 2.5rem; + min-width: 2.5rem; + height: 2.5rem; + min-height: 2.5rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #5f6872; + background: transparent; +} + +.group-upload-sources { + display: grid; + grid-template-columns: repeat(3, 1fr); + flex: none; + min-height: 6rem; + padding: 0.7rem max(1rem, calc((100% - 36rem) / 2)) max(0.7rem, env(safe-area-inset-bottom)); + border-top: 1px solid #e2e5e9; + background: #fff; +} + +.group-upload-sources button { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + min-width: 0; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #5c6570; + background: transparent; + flex-direction: column; + text-transform: none; +} + +.group-upload-sources .material-icons { + margin-bottom: 0.35rem; + color: #398afa; + font-size: 1.7rem; +} + +/* Content library, secure downloads, and conversation search. */ +#sidepanel.content-library-panel { + width: 100%; + min-width: 0; + flex: 1 1 auto; + color-scheme: light; + color: #292e35; + background: #f5f6f8; +} + +.content-library-panel * { + box-sizing: border-box; + letter-spacing: 0; +} + +.library-page { + display: flex; + position: relative; + width: 100%; + min-height: 100%; + overflow: hidden; + flex-direction: column; + background: #f5f6f8; +} + +.library-header { + display: grid; + z-index: 3; + grid-template-columns: 4.5rem minmax(0, 1fr) 4.5rem; + align-items: center; + flex: none; + min-height: 4.5rem; + padding-top: env(safe-area-inset-top); + border-bottom: 1px solid #e9ebee; + background: #fff; +} + +.library-header h1 { + margin: 0; + overflow: hidden; + font-size: 1.15rem; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; +} + +.library-header > button { + display: grid; + place-items: center; + width: 100%; + min-width: 0; + height: 3.2rem; + min-height: 3.2rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #2e333a; + background: transparent; +} + +.library-header > button.text { + color: #247ee6; + font-size: 0.86rem; + text-transform: none; +} + +.library-search { + display: flex; + align-items: center; + flex: none; + height: 2.8rem; + margin: 0.8rem max(1rem, calc((100% - 52rem) / 2)); + padding: 0 0.75rem; + border-radius: 0.35rem; + color: #9299a2; + background: #fff; +} + +.library-search .material-icons { + font-size: 1.2rem; +} + +.library-search input { + width: 100%; + min-width: 0; + height: 100%; + margin: 0; + padding: 0 0.5rem; + border: 0; + box-shadow: none; + background: transparent; +} + +.library-avatar { + display: grid; + place-items: center; + width: 3rem; + height: 3rem; + overflow: hidden; + flex: 0 0 3rem; + border-radius: 0.45rem; + color: #fff; + background: #4389df; +} + +.library-avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.library-type-tabs, +.library-history-tabs { + display: flex; + width: min(100%, 52rem); + min-height: 2.9rem; + margin: 0 auto; + overflow-x: auto; + flex: none; + border-bottom: 1px solid #e4e7eb; + background: #fff; + scrollbar-width: none; +} + +.library-type-tabs button, +.library-history-tabs button { + min-width: 4.3rem; + min-height: 2.9rem; + margin: 0; + padding: 0 0.8rem; + border: 0; + border-bottom: 2px solid transparent; + border-radius: 0; + box-shadow: none; + color: #747c86; + background: transparent; + font-size: 0.8rem; + text-transform: none; +} + +.library-type-tabs button.active, +.library-history-tabs button.active { + border-bottom-color: #398afa; + color: #247ee6; +} + +.library-favorite-list, +.library-history-content { + width: min(100%, 52rem); + min-height: 0; + margin: 0 auto; + overflow-y: auto; + flex: 1 1 auto; +} + +.library-favorite-item { + display: flex; + gap: 0.7rem; + padding: 0.9rem 1rem; + border-bottom: 1px solid #eceef1; + background: #fff; +} + +.library-favorite-item.selecting { + align-items: center; +} + +.library-favorite-content { + min-width: 0; + flex: 1 1 auto; +} + +.library-favorite-content > footer { + display: grid; + grid-template-columns: minmax(0, 1fr) auto 2rem; + align-items: center; + gap: 0.5rem; + margin-top: 0.65rem; + color: #9299a2; + font-size: 0.72rem; +} + +.library-favorite-content > footer span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.library-favorite-content > footer button { + width: 2rem; + min-width: 2rem; + height: 2rem; + min-height: 2rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #7d858e; + background: transparent; +} + +.library-text-content { + margin: 0; + color: #343941; + font-size: 0.94rem; + line-height: 1.65; +} + +.library-file-card { + display: grid; + grid-template-columns: 3rem minmax(0, 1fr) auto; + align-items: center; + gap: 0.8rem; + width: 100%; + min-height: 4.8rem; + margin: 0; + padding: 0.7rem; + border: 1px solid #eceef1; + border-radius: 0.4rem; + box-shadow: none; + color: #30353c; + background: #fafbfc; + text-align: left; + text-transform: none; +} + +.library-file-card > span, +.library-download-icon { + display: grid; + place-items: center; + width: 3rem; + height: 3.4rem; + border-radius: 0.3rem; + color: #fff; + background: #e54b68; + font-size: 0.7rem; + font-weight: 700; +} + +.library-file-card > div { + display: flex; + min-width: 0; + flex-direction: column; +} + +.library-file-card strong { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.library-file-card small { + margin-top: 0.3rem; + color: #9299a2; + font-size: 0.74rem; +} + +.library-file-card.removed { + opacity: 0.65; +} + +.library-file-card em { + color: #d74a53; + font-size: 0.74rem; + font-style: normal; +} + +.library-voice-card { + display: grid; + grid-template-columns: 2rem minmax(4rem, 12rem) auto; + align-items: center; + gap: 0.6rem; + width: min(100%, 20rem); + min-height: 3.2rem; + margin: 0; + padding: 0 0.8rem; + border: 0; + border-radius: 0.4rem; + box-shadow: none; + color: #343a42; + background: #eef5ff; +} + +.library-voice-card.playing { + color: #fff; + background: #398afa; +} + +.library-voice-card .material-icons { + font-size: 1.6rem; +} + +.library-wave { + height: 1rem; + opacity: 0.55; + background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px); +} + +.library-link-card { + display: grid; + grid-template-columns: 5.2rem minmax(0, 1fr); + gap: 0.8rem; + width: 100%; + min-height: 5.8rem; + margin: 0; + padding: 0.7rem; + border: 1px solid #eceef1; + border-radius: 0.4rem; + box-shadow: none; + color: #30353c; + background: #fafbfc; + text-align: left; + text-transform: none; +} + +.library-link-card > img { + width: 5.2rem; + height: 4.5rem; + border-radius: 0.3rem; + object-fit: cover; +} + +.library-link-card > div { + min-width: 0; +} + +.library-link-card strong, +.library-link-card p { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.library-link-card p { + margin: 0.35rem 0; + color: #7e858f; + font-size: 0.76rem; +} + +.library-link-card small { + display: flex; + align-items: center; + color: #9aa0a8; +} + +.library-link-card small .material-icons { + margin-right: 0.25rem; + font-size: 0.95rem; +} + +.library-media-thumb { + position: relative; + width: 11rem; + height: auto; + aspect-ratio: 4 / 3; + min-height: 0; + margin: 0; + padding: 0; + overflow: hidden; + border: 0; + border-radius: 0.4rem; + box-shadow: none; + background: #dfe3e8; +} + +.library-media-thumb img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.library-media-thumb .material-icons { + position: absolute; + top: 50%; + left: 50%; + color: #fff; + font-size: 2.5rem; + filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); + transform: translate(-50%, -50%); +} + +.library-media-thumb small { + position: absolute; + right: 0.4rem; + bottom: 0.3rem; + color: #fff; +} + +.library-check { + display: grid; + place-items: center; + width: 1.4rem; + min-width: 1.4rem; + height: 1.4rem; + min-height: 1.4rem; + margin: 0; + padding: 0; + border: 1px solid #c8cdd3; + border-radius: 50%; + box-shadow: none; + color: #fff; + background: #fff; +} + +.library-check.checked { + border-color: #398afa; + background: #398afa; +} + +.library-check .material-icons { + font-size: 0.95rem; +} + +.library-empty { + display: flex; + align-items: center; + justify-content: center; + min-height: 20rem; + color: #969da6; + flex-direction: column; +} + +.library-empty .material-icons { + margin-bottom: 0.7rem; + color: #b5bbc2; + font-size: 3.5rem; +} + +.library-batch-bar { + display: grid; + grid-template-columns: repeat(2, 1fr); + flex: none; + min-height: 4.5rem; + padding-bottom: env(safe-area-inset-bottom); + border-top: 1px solid #e2e5e9; + background: #fff; +} + +.library-batch-bar button { + display: flex; + align-items: center; + justify-content: center; + min-height: 4.2rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #555e68; + background: transparent; + flex-direction: column; + text-transform: none; +} + +.library-batch-bar button[disabled] { + color: #b6bbc2; +} + +.library-batch-bar span { + margin-top: 0.2rem; + font-size: 0.72rem; +} + +.library-section-title { + width: min(100%, 52rem); + margin: 0 auto; + padding: 0.55rem 1rem; + color: #8a929b; + font-size: 0.78rem; +} + +.library-target-list { + width: min(100%, 52rem); + min-height: 0; + margin: 0 auto; + overflow-y: auto; + flex: 1 1 auto; + background: #fff; +} + +.library-target-list > button { + display: grid; + grid-template-columns: 3rem minmax(0, 1fr) 1.5rem; + align-items: center; + gap: 0.8rem; + width: 100%; + min-height: 4.5rem; + margin: 0; + padding: 0.6rem 1rem; + border: 0; + border-bottom: 1px solid #eceef1; + border-radius: 0; + box-shadow: none; + color: #30353c; + background: #fff; + text-align: left; + text-transform: none; +} + +.library-target-list > button > span:nth-child(2) { + display: flex; + min-width: 0; + flex-direction: column; +} + +.library-target-list small { + margin-top: 0.2rem; + color: #9299a2; +} + +.library-next-bar { + display: flex; + align-items: center; + justify-content: space-between; + flex: none; + min-height: 4.3rem; + padding: 0.6rem max(1rem, calc((100% - 50rem) / 2)); + border-top: 1px solid #e2e5e9; + color: #777f89; + background: #fff; +} + +.library-next-bar button, +.library-share-confirm > button, +.library-primary { + width: auto; + min-width: 5rem; + min-height: 2.8rem; + margin: 0; + padding: 0 1rem; + border: 0; + border-radius: 0.35rem; + box-shadow: none; + color: #fff; + background: #398afa; + text-transform: none; +} + +.library-next-bar button[disabled] { + background: #b7c9df; +} + +.library-share-confirm { + width: min(100%, 42rem); + margin: 0 auto; + padding: 1.2rem; +} + +.library-share-confirm h2 { + margin: 0 0 0.8rem; + font-size: 0.92rem; +} + +.library-target-summary { + display: flex; + gap: 1rem; + padding: 1rem; + overflow-x: auto; + background: #fff; +} + +.library-target-summary > span { + display: flex; + align-items: center; + width: 4rem; + flex: 0 0 4rem; + flex-direction: column; +} + +.library-target-summary small { + width: 100%; + margin-top: 0.3rem; + overflow: hidden; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; +} + +.library-share-confirm > section { + margin-top: 1rem; + padding: 1rem; + background: #fff; +} + +.library-share-confirm > section p { + margin-bottom: 0; + color: #858d96; + font-size: 0.76rem; + line-height: 1.5; +} + +.library-share-confirm textarea { + width: 100%; + min-height: 5rem; + margin: 1rem 0; + padding: 0.8rem; + border: 0; + border-radius: 0.35rem; + box-shadow: none; + background: #fff; + resize: vertical; +} + +.library-share-confirm > button { + width: 100%; +} + +.library-download { + width: min(100%, 36rem); + margin: 0 auto; + padding: 2.5rem 1.2rem; + text-align: center; +} + +.library-download-icon { + width: 5rem; + height: 5.8rem; + margin: 0 auto 1rem; + font-size: 1rem; +} + +.library-download h2 { + margin: 0; + overflow-wrap: anywhere; + font-size: 1.1rem; +} + +.library-download > p { + color: #8a929b; +} + +.library-download dl { + margin: 1.5rem 0; + padding: 0 1rem; + background: #fff; + text-align: left; +} + +.library-download dl > div { + display: flex; + justify-content: space-between; + padding: 0.8rem 0; + border-bottom: 1px solid #eceef1; +} + +.library-download dt, +.library-download dd { + margin: 0; +} + +.library-download dd { + color: #777f89; +} + +.library-primary { + display: flex; + align-items: center; + justify-content: center; + width: 100%; +} + +.library-primary .material-icons { + margin-right: 0.4rem; +} + +.library-download-progress { + margin: 1.5rem 0; + padding: 1rem; + background: #fff; + text-align: left; +} + +.library-download-progress > div { + display: flex; + justify-content: space-between; +} + +.library-download-progress progress { + width: 100%; + height: 0.45rem; + margin: 0.8rem 0 0.4rem; + accent-color: #398afa; +} + +.library-download-progress small { + color: #9299a2; +} + +.library-download-actions { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.8rem; +} + +.library-download-actions button { + min-height: 2.9rem; + margin: 0; + border: 1px solid #dce0e5; + border-radius: 0.35rem; + box-shadow: none; + color: #555e68; + background: #fff; + text-transform: none; +} + +.library-download-actions button.primary { + border-color: #398afa; + color: #fff; + background: #398afa; +} + +.library-download-actions .material-icons { + margin-right: 0.35rem; + font-size: 1.1rem; + vertical-align: middle; +} + +.library-complete { + display: flex; + align-items: center; + gap: 0.7rem; + margin: 1.5rem 0; + padding: 1rem; + color: #257c58; + background: #eaf8f1; + text-align: left; +} + +.library-complete > .material-icons { + font-size: 2rem; +} + +.library-complete > span { + display: flex; + flex-direction: column; +} + +.library-complete small { + margin-top: 0.2rem; + color: #65917d; +} + +.library-message-results > button { + display: grid; + grid-template-columns: 3rem minmax(0, 1fr) 1.5rem; + align-items: start; + gap: 0.8rem; + width: 100%; + min-height: 5.5rem; + margin: 0; + padding: 0.8rem 1rem; + border: 0; + border-bottom: 1px solid #eceef1; + border-radius: 0; + box-shadow: none; + color: #30353c; + background: #fff; + text-align: left; + text-transform: none; +} + +.library-message-results > button > span { + min-width: 0; +} + +.library-message-results p { + margin: 0.3rem 0; + color: #666e78; + line-height: 1.5; +} + +.library-message-results mark { + padding: 0 0.08rem; + color: #1f66b8; + background: #dcecff; +} + +.library-message-results small { + color: #969da5; +} + +.library-record-files, +.library-record-links { + padding: 0.8rem; + background: #fff; +} + +.library-record-files .library-file-card, +.library-record-links .library-link-card { + margin-bottom: 0.7rem; +} + +.library-date-title { + margin: 0; + padding: 0.7rem 0.8rem; + color: #828a94; + font-size: 0.8rem; +} + +.library-media-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 0.35rem; + padding: 0 0.8rem 1rem; +} + +.library-media-grid button { + position: relative; + width: 100%; + height: auto; + min-height: 0; + aspect-ratio: 1; + margin: 0; + padding: 0; + overflow: hidden; + border: 0; + border-radius: 0.25rem; + box-shadow: none; + background: #dfe3e8; +} + +.library-media-grid img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.library-media-grid .material-icons { + position: absolute; + top: 50%; + left: 50%; + color: #fff; + font-size: 2.2rem; + filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); + transform: translate(-50%, -50%); +} + +.library-media-grid small { + position: absolute; + right: 0.3rem; + bottom: 0.2rem; + color: #fff; + font-size: 0.65rem; +} + +/* Android call experience and call records. */ +#sidepanel.call-experience-panel { + width: 100%; + min-width: 0; + flex: 1 1 auto; + color-scheme: light; + background: #11151a; +} + +.call-experience-panel * { + box-sizing: border-box; + letter-spacing: 0; +} + +.call-history-page, +.call-minimized-page { + display: flex; + position: relative; + width: 100%; + min-height: 100%; + overflow: hidden; + color: #252a31; + background: #f5f6f8; + flex-direction: column; +} + +.call-history-page > header, +.call-chat-preview-header { + display: grid; + grid-template-columns: 3.8rem minmax(0, 1fr) 3.8rem; + align-items: center; + flex: none; + min-height: 4.5rem; + padding-top: env(safe-area-inset-top); + border-bottom: 1px solid #e8eaed; + background: #fff; +} + +.call-history-page > header h1 { + margin: 0; + font-size: 1.15rem; + text-align: center; +} + +.call-history-page > header button, +.call-chat-preview-header button { + display: grid; + place-items: center; + width: 100%; + min-width: 0; + height: 3.2rem; + min-height: 3.2rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #30353c; + background: transparent; +} + +.call-history-page > main { + width: min(100%, 48rem); + min-height: 0; + margin: 0 auto; + overflow-y: auto; + flex: 1 1 auto; + background: #fff; +} + +.call-record { + display: grid; + grid-template-columns: 2.5rem minmax(0, 1fr) auto 1.5rem; + align-items: center; + gap: 0.7rem; + width: 100%; + min-height: 4.5rem; + margin: 0; + padding: 0.65rem 1rem; + border: 0; + border-bottom: 1px solid #eceef1; + border-radius: 0; + box-shadow: none; + color: #30353c; + background: #fff; + text-align: left; + text-transform: none; +} + +.call-record > .material-icons:first-child { + display: grid; + place-items: center; + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + color: #257a58; + background: #e9f7f0; +} + +.call-record.missed > .material-icons:first-child, +.call-record.declined > .material-icons:first-child, +.call-record.busy > .material-icons:first-child { + color: #d84850; + background: #fdecee; +} + +.call-record > span { + display: flex; + min-width: 0; + flex-direction: column; +} + +.call-record small { + margin-top: 0.2rem; + color: #858d96; +} + +.call-record.missed small, +.call-record.declined small, +.call-record.busy small { + color: #d84850; +} + +.call-record time { + color: #969da5; + font-size: 0.72rem; +} + +.call-record > .material-icons:last-child { + color: #8d949d; + font-size: 1rem; +} + +.call-history-page > footer { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.8rem; + width: min(100%, 48rem); + min-height: 4.8rem; + margin: 0 auto; + padding: 0.7rem 1rem max(0.7rem, env(safe-area-inset-bottom)); + border-top: 1px solid #e2e5e9; + background: #fff; +} + +.call-history-page > footer button { + display: flex; + align-items: center; + justify-content: center; + min-height: 3rem; + margin: 0; + border: 0; + border-radius: 0.35rem; + box-shadow: none; + color: #fff; + background: #277f5a; + text-transform: none; +} + +.call-history-page > footer button:last-child { + background: #347fd7; +} + +.call-history-page > footer .material-icons { + margin-right: 0.4rem; + font-size: 1.2rem; +} + +.call-fullscreen { + display: flex; + position: relative; + width: 100%; + min-height: 100%; + overflow: hidden; + color: #fff; + background: #171c22; + flex-direction: column; + isolation: isolate; +} + +.call-audio-surface { + background: #26323b; +} + +.call-ambient { + position: absolute; + z-index: -2; + inset: -2rem; + background: linear-gradient(160deg, #34444f 0%, #202931 52%, #151a20 100%); +} + +.call-audio-surface::after { + content: ''; + position: absolute; + z-index: -1; + inset: 0; + opacity: 0.12; + background-image: url('../img/bkg/p09.jpg'); + background-position: center; + background-size: cover; + filter: blur(24px); + transform: scale(1.12); +} + +.call-product-header { + display: grid; + z-index: 4; + grid-template-columns: 4rem minmax(0, 1fr) 4rem; + align-items: center; + flex: none; + min-height: 4.8rem; + padding-top: env(safe-area-inset-top); +} + +.call-product-header > button { + display: grid; + place-items: center; + width: 100%; + min-width: 0; + height: 3.4rem; + min-height: 3.4rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: rgba(255,255,255,0.92); + background: transparent; +} + +.call-product-header > span { + color: rgba(255,255,255,0.7); + font-size: 0.74rem; + text-align: center; +} + +.call-peer-card { + display: flex; + z-index: 2; + align-items: center; + justify-content: center; + min-height: 0; + padding: 1rem; + flex: 1 1 auto; + flex-direction: column; +} + +.call-product-avatar { + display: block; + width: 7.5rem; + height: 7.5rem; + overflow: hidden; + border: 2px solid rgba(255,255,255,0.4); + border-radius: 50%; + box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.25); +} + +.call-product-avatar.small { + width: 3rem; + height: 3rem; +} + +.call-product-avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.call-peer-card h1 { + margin: 1.3rem 0 0.45rem; + color: #fff; + font-size: 1.55rem; +} + +.call-peer-card p { + margin: 0; + color: rgba(255,255,255,0.78); + font-size: 0.92rem; +} + +.call-peer-card .call-network { + display: flex; + align-items: center; + margin-top: 0.65rem; + color: rgba(255,255,255,0.62); +} + +.call-network i { + width: 0.45rem; + height: 0.45rem; + margin-right: 0.35rem; + border-radius: 50%; + background: #43d38c; +} + +.call-ringing-dots { + display: flex; + gap: 0.35rem; + margin-top: 1rem; +} + +.call-ringing-dots i { + width: 0.4rem; + height: 0.4rem; + border-radius: 50%; + background: rgba(255,255,255,0.65); + animation: call-dot 1.2s infinite ease-in-out; +} + +.call-ringing-dots i:nth-child(2) { + animation-delay: 0.15s; +} + +.call-ringing-dots i:nth-child(3) { + animation-delay: 0.3s; +} + +@keyframes call-dot { + 0%, 70%, 100% { transform: translateY(0); opacity: 0.45; } + 35% { transform: translateY(-0.35rem); opacity: 1; } +} + +.call-incoming-actions, +.call-active-controls, +.call-single-action, +.call-video-controls { + display: flex; + z-index: 4; + align-items: flex-start; + justify-content: space-evenly; + flex: none; + min-height: 8rem; + padding: 1rem max(1rem, calc((100% - 34rem) / 2)) max(1.5rem, env(safe-area-inset-bottom)); +} + +.call-single-action { + justify-content: center; +} + +.call-control { + display: flex; + align-items: center; + width: 5rem; + min-width: 5rem; + height: auto; + min-height: 0; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: rgba(255,255,255,0.78); + background: transparent; + flex-direction: column; + text-transform: none; +} + +.call-control > span { + display: grid; + place-items: center; + width: 3.7rem; + height: 3.7rem; + border-radius: 50%; + color: #fff; + background: rgba(255,255,255,0.16); + backdrop-filter: blur(8px); +} + +.call-control.active > span { + color: #22272d; + background: #fff; +} + +.call-control.danger > span { + color: #fff; + background: #e3464f; +} + +.call-control .material-icons { + font-size: 1.55rem; +} + +.call-control small { + width: 100%; + margin-top: 0.5rem; + color: inherit; + font-size: 0.7rem; + line-height: 1.2; + text-align: center; +} + +.call-incoming-actions .call-control:last-child > span { + background: #2ab56f; +} + +.call-video-surface { + background: #11151a; +} + +.call-video-backdrop, +.call-video-off { + position: absolute; + z-index: -2; + inset: 0; + width: 100%; + height: 100%; +} + +.call-video-backdrop { + object-fit: cover; +} + +.call-video-off { + display: flex; + align-items: center; + justify-content: center; + background: #252f37; + flex-direction: column; +} + +.call-video-off .call-product-avatar { + width: 7rem; + height: 7rem; +} + +.call-video-off strong { + margin-top: 1.2rem; +} + +.call-video-off small { + margin-top: 0.35rem; + color: rgba(255,255,255,0.68); +} + +.call-video-off.local { + background: #20272e; +} + +.call-video-shade { + position: absolute; + z-index: -1; + inset: 0; + background: linear-gradient(180deg, rgba(0,0,0,0.42), transparent 30%, transparent 62%, rgba(0,0,0,0.58)); +} + +.call-video-status { + z-index: 2; + text-align: center; +} + +.call-video-status h1 { + margin: 0.4rem 0 0.25rem; + color: #fff; + font-size: 1.25rem; +} + +.call-video-status p { + margin: 0; + color: rgba(255,255,255,0.8); +} + +.call-video-controls { + margin-top: auto; +} + +.call-local-preview { + position: absolute; + z-index: 3; + top: max(6.2rem, calc(env(safe-area-inset-top) + 5rem)); + right: 1rem; + width: 7rem; + min-width: 7rem; + height: auto; + min-height: 0; + aspect-ratio: 3 / 4; + margin: 0; + padding: 0; + overflow: hidden; + border: 1px solid rgba(255,255,255,0.35); + border-radius: 0.4rem; + box-shadow: 0 0.5rem 1.2rem rgba(0,0,0,0.3); + background: #252c33; +} + +.call-local-preview img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.call-local-preview .material-icons { + position: absolute; + top: 50%; + left: 50%; + color: #fff; + transform: translate(-50%, -50%); +} + +.call-toast { + position: fixed; + z-index: 50; + bottom: max(1.5rem, env(safe-area-inset-bottom)); + left: 50%; + max-width: calc(100% - 2rem); + padding: 0.7rem 1rem; + border-radius: 0.3rem; + color: #fff; + background: rgba(24,28,34,0.94); + text-align: center; + transform: translateX(-50%); +} + +.call-chat-preview-header > div { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.call-chat-preview-header small { + margin-top: 0.15rem; + color: #37a66d; +} + +.call-minimized-page > main { + min-height: 0; + padding: 1.5rem max(1rem, calc((100% - 52rem) / 2)); + overflow-y: auto; + flex: 1 1 auto; +} + +.call-chat-preview-message { + width: fit-content; + max-width: 70%; + padding: 0.7rem 0.9rem; + border-radius: 0.4rem; + background: #fff; + line-height: 1.5; +} + +.call-chat-composer { + display: grid; + grid-template-columns: minmax(0, 1fr) 3rem; + align-items: center; + flex: none; + min-height: 4rem; + padding: 0.5rem max(0.7rem, calc((100% - 52rem) / 2)); + border-top: 1px solid #e2e5e9; + background: #fff; +} + +.call-chat-composer input { + height: 2.7rem; + margin: 0; + padding: 0 0.7rem; + border: 1px solid #e1e4e8; + border-radius: 0.35rem; + box-shadow: none; + background: #f7f8f9; +} + +.call-chat-composer button { + width: 3rem; + min-width: 3rem; + height: 2.7rem; + min-height: 2.7rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + background: transparent; +} + +.call-floating-window { + position: fixed; + z-index: 20; + top: 0; + left: 0; + width: 7.4rem; + min-width: 7.4rem; + height: auto; + min-height: 0; + aspect-ratio: 3 / 4; + margin: 0; + padding: 0; + overflow: hidden; + touch-action: none; + border: 1px solid rgba(255,255,255,0.6); + border-radius: 0.45rem; + box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.28); + background: #20262c; +} + +.call-floating-window img { + width: 100%; + height: 100%; + pointer-events: none; + object-fit: cover; +} + +.call-floating-window span { + position: absolute; + right: 0.4rem; + bottom: 0.35rem; + display: flex; + align-items: center; + color: #fff; + font-size: 0.68rem; + text-shadow: 0 1px 2px rgba(0,0,0,0.8); +} + +.call-floating-window span i { + width: 0.4rem; + height: 0.4rem; + margin-right: 0.25rem; + border-radius: 50%; + background: #41d48d; +} + +.call-mini-hangup { + position: fixed; + z-index: 21; + right: 1rem; + bottom: 5.2rem; + display: grid; + place-items: center; + width: 3rem; + min-width: 3rem; + height: 3rem; + min-height: 3rem; + margin: 0; + padding: 0; + border: 0; + border-radius: 50%; + box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.2); + color: #fff; + background: #e3464f; +} + +.compose-target-footer { + justify-content: space-between; + margin-top: auto; + color: #757d87; + font-size: 0.82rem; +} + +.compose-forward-confirm { + width: min(100%, 40rem); + margin: 0 auto; + padding: 1.2rem; +} + +.compose-forward-confirm > section, +.compose-forward-confirm textarea { + width: 100%; + margin-bottom: 1rem; + padding: 1rem; + border: 0; + border-radius: 0.45rem; + background: #fff; +} + +.compose-target-summary { + display: flex; + gap: 1rem; + overflow-x: auto; +} + +.compose-target-summary > span { + display: flex; + align-items: center; + width: 4rem; + flex: 0 0 4rem; + flex-direction: column; +} + +.compose-target-summary small { + width: 100%; + margin-top: 0.35rem; + overflow: hidden; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; +} + +.compose-forward-preview h2 { + margin-top: 0; +} + +.compose-forward-preview p { + margin: 0.45rem 0; + overflow: hidden; + color: #757c85; + font-size: 0.82rem; + text-overflow: ellipsis; + white-space: nowrap; +} + +.compose-forward-confirm textarea { + min-height: 5rem; + resize: vertical; +} + +.compose-forward-mode { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.7rem; + margin-bottom: 1rem; +} + +.compose-forward-mode button { + min-height: 2.8rem; + margin: 0; + border: 1px solid #dce0e5; + border-radius: 0.35rem; + box-shadow: none; + color: #646c76; + background: #fff; + text-transform: none; +} + +.compose-forward-mode button.active { + border-color: #398afa; + color: #287fe5; + background: #eef6ff; +} + +.compose-confirm-send { + width: 100%; + min-height: 3rem; + margin: 0; +} + @keyframes fadein { from { bottom: 0; @@ -3824,6 +11151,212 @@ div.toast.show { width: 100%; } + #sidepanel.message-center-panel, + #sidepanel.message-center-panel.full-page { + width: 100%; + min-width: 0; + flex-basis: 100%; + } + + #sidepanel.direct-message-panel { + width: 100%; + min-width: 0; + } + + #sidepanel.message-composer-panel { + width: 100%; + min-width: 0; + } + + #sidepanel.contact-management-panel, + #sidepanel.group-management-panel { + width: 100%; + min-width: 0; + } + + #sidepanel.content-library-panel { + width: 100%; + min-width: 0; + } + + #sidepanel.call-experience-panel { + width: 100%; + min-width: 0; + } + + .call-active-controls, + .call-video-controls { + padding-right: 0.35rem; + padding-left: 0.35rem; + } + + .call-control { + width: 4.5rem; + min-width: 4.5rem; + } + + .call-control > span { + width: 3.4rem; + height: 3.4rem; + } + + .library-media-grid { + grid-template-columns: repeat(3, 1fr); + } + + .library-link-card { + grid-template-columns: 4.3rem minmax(0, 1fr); + } + + .library-link-card > img { + width: 4.3rem; + height: 4.3rem; + } + + .people-request-list article, + .group-request-list article { + align-items: flex-start; + } + + .people-request-list article > span, + .group-request-list article > span { + flex-direction: column; + } + + .people-profile-actions { + grid-template-columns: 1fr; + } + + .compose-emoji-panel > div { + grid-template-columns: repeat(7, 1fr); + } + + .compose-picker-header { + grid-template-columns: 4rem minmax(0, 1fr) 4.5rem; + } + + .compose-upload-page > main, + .compose-forward-confirm { + padding: 1rem; + } + + .chat-product-timeline { + padding: 1.25rem 1rem; + } + + .chat-message-stack { + max-width: calc(100% - 4rem); + } + + .chat-bubble { + font-size: 0.94rem; + } + + .chat-file-card { + min-width: min(17rem, calc(100vw - 6rem)); + } + + .chat-contact-card { + min-width: min(16rem, calc(100vw - 6rem)); + } + + .chat-composer { + padding-right: 0.4rem; + padding-left: 0.4rem; + } + + .chat-attachment-panel { + grid-template-columns: repeat(4, 1fr); + gap: 0.7rem; + padding: 1rem 0.75rem max(1rem, env(safe-area-inset-bottom)); + } + + .chat-attachment-panel button > span { + width: 3.3rem; + height: 3.3rem; + } + + .messages-conversation { + grid-template-columns: 3.55rem minmax(0, 1fr) auto; + min-height: 4.8rem; + padding-right: 1rem; + padding-left: 1rem; + } + + .messages-frequent-scroll { + gap: 1rem; + padding-right: 1rem; + padding-left: 1rem; + } + + .messages-frequent h2 { + margin-left: 1rem; + } + + .messages-search { + margin-right: 1rem; + margin-left: 1rem; + } + + .system-notification-list { + padding: 1rem; + } + + .auth-landing { + padding-right: 1.25rem; + padding-left: 1.25rem; + } + + .auth-brand { + margin-bottom: 3rem; + } + + .auth-content { + padding: 1.25rem; + } + + .auth-reset-content { + padding: 1rem 0; + } + + .auth-list-form { + min-height: calc(100vh - 6.25rem); + } + + .auth-list-form label { + grid-template-columns: 6.4rem 1fr auto; + } + + .auth-code-button { + min-width: 5.8rem; + padding: 0 0.4rem; + } + + .auth-realname-hero { + min-height: 12rem; + padding: 1.5rem; + } + + .auth-realname-hero strong { + font-size: 2rem; + } + + .auth-realname-hero > .material-icons { + font-size: 6rem; + } + + .auth-realname-content form { + padding: 1.25rem; + } + + .auth-realname-content label { + grid-template-columns: 6.2rem 1fr; + } + + .auth-screenshot-grid { + grid-template-columns: repeat(3, 1fr); + } + #info-view { width: 100%; } @@ -3882,3 +11415,1698 @@ div.toast.show { border-radius: unset; } } + +/* Android personal profile, settings, privacy, youth mode and permissions. */ +#sidepanel.personal-settings-panel { + width: 100%; + min-width: 0; + flex: 1 1 auto; + color-scheme: light; + background: #f5f6f8; +} + +.personal-settings-panel * { + box-sizing: border-box; + letter-spacing: 0; +} + +.personal-page { + display: flex; + position: relative; + width: 100%; + min-height: 100%; + overflow: hidden; + color: #262b31; + background: #f5f6f8; + flex-direction: column; +} + +.personal-page > .personal-page { + min-height: 0; + flex: 1 1 auto; +} + +.personal-page button, +.personal-page input, +.personal-page textarea { + font: inherit; + letter-spacing: 0; +} + +.personal-page button { + text-transform: none; +} + +.personal-page > main { + min-height: 0; + overflow-y: auto; + flex: 1 1 auto; +} + +.personal-header { + display: grid; + grid-template-columns: 3.7rem minmax(0, 1fr) 3.7rem; + align-items: center; + min-height: 4.5rem; + padding-top: env(safe-area-inset-top); + border-bottom: 1px solid #e7e9ec; + background: #fff; + flex: none; +} + +.personal-header h1 { + min-width: 0; + margin: 0; + overflow: hidden; + font-size: 1.15rem; + font-weight: 650; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; +} + +.personal-header button { + display: grid; + place-items: center; + width: 3.7rem; + min-width: 3.7rem; + height: 3.7rem; + min-height: 3.7rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #252a30; + background: transparent; +} + +.personal-header button.text { + color: #2873d0; + font-size: 0.9rem; +} + +.personal-header .material-icons { + font-size: 1.55rem; +} + +.personal-toast { + position: fixed; + z-index: 90; + bottom: max(1.5rem, env(safe-area-inset-bottom)); + left: 50%; + max-width: calc(100% - 2rem); + padding: 0.7rem 1rem; + border-radius: 0.3rem; + color: #fff; + background: rgba(25,29,34,0.94); + text-align: center; + transform: translateX(-50%); +} + +.personal-center-page > main { + padding: 0.85rem 0; +} + +.personal-center-page section, +.personal-menu-section, +.android-settings-list section, +.privacy-list section { + margin-bottom: 0.75rem; + background: #fff; +} + +.personal-identity { + display: grid; + grid-template-columns: 4.5rem minmax(0, 1fr) 1.5rem; + align-items: center; + gap: 0.8rem; + width: calc(100% - 1.6rem); + min-height: 7rem; + margin: 0 0.8rem 0.8rem; + padding: 0.9rem; + border: 0; + border-radius: 0.45rem; + box-shadow: none; + color: #2e3339; + background: #fff; + text-align: left; +} + +.personal-identity img { + width: 4.5rem; + height: 4.5rem; + border-radius: 0.55rem; + object-fit: cover; +} + +.personal-identity span, +.personal-identity strong, +.personal-identity small { + display: block; + min-width: 0; +} + +.personal-identity strong { + margin-bottom: 0.35rem; + overflow: hidden; + font-size: 1.25rem; + text-overflow: ellipsis; + white-space: nowrap; +} + +.personal-identity small { + margin-top: 0.15rem; + color: #8a919a; +} + +.personal-menu-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: 0.65rem; + width: 100%; + min-height: 4rem; + margin: 0; + padding: 0.65rem 1rem; + border: 0; + border-bottom: 1px solid #eceef1; + border-radius: 0; + box-shadow: none; + color: #30353b; + background: #fff; + text-align: left; +} + +.personal-menu-row:has(> .material-icons:first-child) { + grid-template-columns: 2.3rem minmax(0, 1fr) auto; +} + +.personal-menu-row:last-child { + border-bottom: 0; +} + +.personal-menu-row > .material-icons:first-child { + color: #59636e; + font-size: 1.55rem; +} + +.personal-menu-row > .material-icons:last-child { + color: #a8aeb5; +} + +.personal-menu-row span { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.7rem; + min-width: 0; +} + +.personal-menu-row strong { + min-width: 0; + font-weight: 500; +} + +.personal-menu-row small { + max-width: 62%; + overflow: hidden; + color: #969da5; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; +} + +.personal-profile-list { + padding-top: 0.7rem; + background: #fff; +} + +.personal-profile-list > button:first-child { + display: grid; + grid-template-columns: minmax(0, 1fr) 3.8rem 1.5rem; + align-items: center; + width: 100%; + min-height: 5rem; + margin: 0; + padding: 0.6rem 1rem; + border: 0; + border-bottom: 1px solid #eceef1; + border-radius: 0; + box-shadow: none; + color: #30353b; + background: #fff; + text-align: left; +} + +.personal-profile-list > button:first-child img { + width: 3.5rem; + height: 3.5rem; + border-radius: 0.45rem; + object-fit: cover; +} + +.profile-editor-page > main { + padding: 1rem; +} + +.profile-editor-page > main > label { + display: block; + position: relative; +} + +.profile-editor-page label input, +.profile-editor-page label textarea { + width: 100%; + margin: 0; + padding: 0.75rem 3rem 0.75rem 0.75rem; + border: 1px solid #dbe0e5; + border-radius: 0.35rem; + box-shadow: none; + background: #fff; +} + +.profile-editor-page label input:not([type='date']) { + height: 3.2rem; +} + +.profile-editor-page label textarea { + height: 11rem; + padding-bottom: 2rem; + resize: vertical; + line-height: 1.5; +} + +.profile-editor-page > main > label > small { + position: absolute; + right: 0.75rem; + bottom: 0.65rem; + color: #9ba2aa; +} + +.profile-editor-page > main > label > button { + position: absolute; + top: 0.1rem; + right: 2.7rem; + display: grid; + place-items: center; + width: 2.8rem; + min-width: 2.8rem; + height: 3rem; + min-height: 3rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #a3a9b0; + background: transparent; +} + +.profile-editor-page > main > p { + margin: 0.65rem 0 0; + color: #8a929b; + font-size: 0.8rem; +} + +.birth-date-editor { + display: flex; + align-items: center; + padding-top: 4rem !important; + flex-direction: column; +} + +.birth-date-editor > .material-icons { + color: #d66372; + font-size: 4rem; +} + +.birth-date-editor label { + width: min(100%, 26rem); + margin-top: 1.5rem; +} + +.birth-date-editor label span { + display: block; + margin-bottom: 0.5rem; + font-weight: 600; +} + +.birth-date-editor label input { + height: 3.2rem; + padding: 0 0.75rem; +} + +.personal-qr-page > main { + padding: 1rem; +} + +.personal-qr-page main > section { + width: min(100%, 27rem); + margin: 0 auto; + padding: 1.2rem; + border-radius: 0.45rem; + background: #fff; + text-align: center; +} + +.personal-qr-profile { + display: flex; + align-items: center; + gap: 0.7rem; + text-align: left; +} + +.personal-qr-profile img { + width: 3.3rem; + height: 3.3rem; + border-radius: 0.4rem; + object-fit: cover; +} + +.personal-qr-profile span, +.personal-qr-profile strong, +.personal-qr-profile small { + display: block; +} + +.personal-qr-profile small { + margin-top: 0.2rem; + color: #858d96; +} + +.personal-qrcode { + display: inline-block; + width: 226px; + height: 226px; + margin: 1.5rem auto 0.8rem; + padding: 8px; + border: 1px solid #eceef1; + background: #fff; +} + +.personal-qrcode img, +.personal-qrcode canvas { + width: 210px !important; + height: 210px !important; +} + +.personal-qr-page section > p { + margin: 0.5rem 0; +} + +.personal-qr-page section > small { + color: #8d949d; +} + +.personal-qr-actions { + display: grid; + grid-template-columns: repeat(2, 1fr); + width: min(100%, 27rem); + margin: 0.8rem auto 0; + background: #fff; +} + +.personal-qr-actions button { + display: flex; + align-items: center; + justify-content: center; + min-height: 3.4rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #3476cd; + background: transparent; +} + +.personal-qr-actions button + button { + border-left: 1px solid #eceef1; +} + +.personal-qr-actions .material-icons { + margin-right: 0.3rem; +} + +.android-settings-list { + padding: 0.75rem 0 1.5rem; +} + +.personal-logout { + width: 100%; + min-height: 3.8rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #d93f48; + background: #fff; +} + +.personal-sheet-backdrop, +.update-backdrop, +.permission-overlay { + display: grid; + position: absolute; + z-index: 70; + inset: 0; + place-items: center; + padding: 1rem; + background: rgba(22,26,31,0.52); +} + +.personal-confirm-sheet { + width: min(100%, 25rem); + padding: 1.25rem; + border-radius: 0.5rem; + background: #fff; + text-align: center; +} + +.personal-confirm-sheet > .material-icons { + color: #4d73aa; + font-size: 2.8rem; +} + +.personal-confirm-sheet h2 { + margin: 0.65rem 0; + font-size: 1.15rem; +} + +.personal-confirm-sheet p { + margin: 0.7rem 0 1rem; + color: #5c646e; + line-height: 1.6; + text-align: left; +} + +.personal-confirm-sheet input { + width: 100%; + height: 3rem; + margin: 0 0 0.8rem; + padding: 0 0.75rem; + border: 1px solid #dce0e5; + border-radius: 0.35rem; + box-shadow: none; + text-align: center; +} + +.personal-confirm-sheet button { + width: 100%; + min-height: 2.9rem; + margin: 0.45rem 0 0; + padding: 0 1rem; + border: 0; + border-radius: 0.35rem; + box-shadow: none; + color: #4d5660; + background: #f0f2f4; +} + +.personal-confirm-sheet button.primary { + color: #fff; + background: #347bd7; +} + +.personal-confirm-sheet button.danger { + color: #fff; + background: #d84950; +} + +.app-version-page > main { + padding: 2rem 1rem; +} + +.app-brand { + margin-bottom: 2rem; + text-align: center; +} + +.app-brand > span { + display: grid; + place-items: center; + width: 6.5rem; + height: 6.5rem; + margin: 0 auto 0.8rem; + border-radius: 1.2rem; + color: #fff; + background: #2878d6; +} + +.app-brand .material-icons { + font-size: 4.2rem; +} + +.app-brand h2, +.app-brand p { + margin: 0; +} + +.app-brand h2 { + font-size: 1.25rem; +} + +.app-brand p { + margin-top: 0.25rem; + color: #777f89; +} + +.update-dialog { + width: min(100%, 25rem); + padding: 1.3rem; + border-radius: 0.55rem; + background: #fff; + text-align: center; +} + +.update-dialog > span { + display: grid; + place-items: center; + width: 5rem; + height: 5rem; + margin: 0 auto 0.8rem; + border-radius: 50%; + color: #fff; + background: #4e74b7; +} + +.update-dialog > span .material-icons { + font-size: 3.2rem; +} + +.update-dialog h2 { + margin: 0; + font-size: 1.35rem; +} + +.update-dialog > strong { + display: block; + margin-top: 0.25rem; + color: #69717b; +} + +.update-dialog ul { + margin: 1rem 0; + padding-left: 1.25rem; + color: #4e5660; + line-height: 1.65; + text-align: left; +} + +.update-dialog button { + width: 100%; + min-height: 3rem; + margin: 0.45rem 0 0; + padding: 0 1rem; + border: 0; + border-radius: 0.35rem; + box-shadow: none; + color: #777f88; + background: transparent; +} + +.update-dialog button:first-of-type { + color: #fff; + background: #347bd7; +} + +.privacy-list { + padding-top: 0.75rem; +} + +.privacy-list section > div { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: 0.8rem; + min-height: 4.6rem; + padding: 0.7rem 1rem; + border-bottom: 1px solid #eceef1; +} + +.privacy-list section > div:last-child { + border-bottom: 0; +} + +.privacy-list section > div span, +.privacy-list section > div strong, +.privacy-list section > div small { + display: block; + min-width: 0; +} + +.privacy-list section > div small { + margin-top: 0.25rem; + color: #8b929b; + line-height: 1.35; +} + +.personal-switch { + position: relative; + width: 3.25rem; + min-width: 3.25rem; + height: 1.9rem; + min-height: 1.9rem; + margin: 0; + padding: 0; + border: 0; + border-radius: 1rem; + box-shadow: none; + background: #d8dce1; +} + +.personal-switch i { + position: absolute; + top: 0.15rem; + left: 0.15rem; + width: 1.6rem; + height: 1.6rem; + border-radius: 50%; + background: #fff; + box-shadow: 0 1px 4px rgba(0,0,0,0.2); + transition: transform 160ms ease; +} + +.personal-switch.checked { + background: #347bd7; +} + +.personal-switch.checked i { + transform: translateX(1.35rem); +} + +.privacy-note { + margin: 0; + padding: 0 1rem 0.75rem; + color: #7e8690; + font-size: 0.82rem; + line-height: 1.5; +} + +.youth-mode-page { + background: #fff; +} + +.youth-mode-page > main { + padding: 3.2rem 1.5rem 1rem; + text-align: center; +} + +.youth-mode-page > main > .material-icons { + color: #347bd7; + font-size: 5rem; +} + +.youth-mode-page h2 { + margin: 1rem 0 1.5rem; + font-size: 1.45rem; +} + +.youth-mode-page ul { + margin: 0; + padding: 0; + list-style: none; + text-align: left; +} + +.youth-mode-page li { + position: relative; + margin-bottom: 1.2rem; + padding-left: 1.7rem; + line-height: 1.55; +} + +.youth-mode-page li::before { + position: absolute; + top: 0.55rem; + left: 0.2rem; + width: 0.55rem; + height: 0.55rem; + border-radius: 50%; + background: #347bd7; + content: ''; +} + +.youth-usage { + margin-top: 1.8rem; + color: #868e97; +} + +.youth-mode-page > footer { + padding: 0.8rem 1rem max(1rem, env(safe-area-inset-bottom)); + background: #fff; + text-align: center; + flex: none; +} + +.youth-mode-page > footer button { + width: 100%; + min-height: 3.2rem; + margin: 0; + padding: 0 1rem; + border: 0; + border-radius: 0.35rem; + box-shadow: none; + color: #fff; + background: #347bd7; +} + +.youth-mode-page > footer button.outline { + border: 1px solid #347bd7; + color: #347bd7; + background: #fff; +} + +.youth-mode-page > footer small { + display: block; + margin-top: 0.65rem; + color: #9aa1a9; +} + +.permission-guide-page { + background: #fff; +} + +.permission-preview { + padding: 1.2rem 1rem; + opacity: 0.72; +} + +.permission-preview > header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.permission-preview h1 { + margin: 0; + font-size: 1.35rem; +} + +.permission-preview > label { + display: flex; + align-items: center; + justify-content: center; + min-height: 3rem; + margin: 1rem 0; + border-radius: 0.35rem; + color: #8d949c; + background: #f0f2f4; +} + +.permission-preview > label .material-icons { + margin-right: 0.35rem; +} + +.permission-preview > div { + display: grid; + grid-template-columns: 3.4rem minmax(0, 1fr); + align-items: center; + gap: 0.7rem; + min-height: 4.6rem; + border-bottom: 1px solid #eceef1; +} + +.permission-preview > div > span:last-child, +.permission-preview > div strong, +.permission-preview > div small { + display: block; + min-width: 0; +} + +.permission-preview > div small { + margin-top: 0.2rem; + color: #8b929b; +} + +.permission-avatar { + display: grid; + place-items: center; + width: 3.1rem; + height: 3.1rem; + border-radius: 0.45rem; + color: #fff; + background: #5a77a9; +} + +.permission-avatar.tone-0 { background: #d18128; } +.permission-avatar.tone-1 { background: #4673bd; } +.permission-avatar.tone-2 { background: #398258; } +.permission-avatar.tone-3 { background: #9c5f7a; } + +.permission-overlay section { + width: min(100%, 24rem); + padding: 1.3rem; + border-radius: 0.5rem; + background: #fff; + text-align: center; +} + +.permission-overlay section > span { + display: grid; + place-items: center; + width: 4.6rem; + height: 4.6rem; + margin: 0 auto 0.8rem; + border-radius: 50%; + color: #fff; + background: #347bd7; +} + +.permission-overlay section > span .material-icons { + font-size: 2.7rem; +} + +.permission-overlay h2 { + margin: 0; + font-size: 1.2rem; +} + +.permission-overlay p { + margin: 0.8rem 0 1rem; + color: #555d67; + line-height: 1.6; + text-align: left; +} + +.permission-overlay button { + width: 100%; + min-height: 3rem; + margin: 0.4rem 0 0; + padding: 0 1rem; + border: 0; + border-radius: 0.35rem; + box-shadow: none; + color: #8a919a; + background: transparent; +} + +.permission-overlay button:first-of-type { + color: #fff; + background: #347bd7; +} + +@media screen and (max-width: 480px) { + .personal-menu-row { + min-height: 3.8rem; + } + + .personal-menu-row small { + max-width: 55%; + } + + .personal-qrcode { + margin-top: 1rem; + } + + .youth-mode-page > main { + padding-top: 2rem; + } +} + +/* Android anti-fraud warnings, abuse reports and user feedback. */ +#sidepanel.security-support-panel { + width: 100%; + min-width: 0; + flex: 1 1 auto; + color-scheme: light; + background: #f5f6f8; +} + +.security-support-panel * { + box-sizing: border-box; + letter-spacing: 0; +} + +.support-page { + display: flex; + position: relative; + width: 100%; + min-height: 100%; + overflow: hidden; + color: #272c32; + background: #f5f6f8; + flex-direction: column; +} + +.support-page button, +.support-page input, +.support-page textarea { + font: inherit; + letter-spacing: 0; +} + +.support-page button { + text-transform: none; +} + +.support-page > main { + min-height: 0; + overflow-y: auto; + flex: 1 1 auto; +} + +.support-header { + display: grid; + grid-template-columns: 3.7rem minmax(0, 1fr) 3.7rem; + align-items: center; + min-height: 4.5rem; + padding-top: env(safe-area-inset-top); + border-bottom: 1px solid #e6e9ec; + background: #fff; + flex: none; +} + +.support-header h1 { + min-width: 0; + margin: 0; + overflow: hidden; + font-size: 1.15rem; + font-weight: 650; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; +} + +.support-header button { + display: grid; + place-items: center; + width: 3.7rem; + min-width: 3.7rem; + height: 3.7rem; + min-height: 3.7rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #272c32; + background: transparent; +} + +.support-toast { + position: fixed; + z-index: 100; + bottom: max(1.5rem, env(safe-area-inset-bottom)); + left: 50%; + max-width: calc(100% - 2rem); + padding: 0.7rem 1rem; + border-radius: 0.3rem; + color: #fff; + background: rgba(25,29,34,0.94); + text-align: center; + transform: translateX(-50%); +} + +.risk-warning-page { + background: #fff; +} + +.risk-conversation-preview { + min-height: 100%; + opacity: 0.78; +} + +.risk-conversation-preview > header { + display: grid; + grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem; + align-items: center; + min-height: 4.5rem; + padding-top: env(safe-area-inset-top); + border-bottom: 1px solid #e7e9ec; + background: #fff; + text-align: center; +} + +.risk-conversation-preview > header button { + display: grid; + place-items: center; + width: 3.5rem; + height: 3.5rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + background: transparent; +} + +.risk-conversation-preview > header span, +.risk-conversation-preview > header strong, +.risk-conversation-preview > header small { + display: block; +} + +.risk-conversation-preview > header small { + margin-top: 0.15rem; + color: #3d9a68; +} + +.risk-conversation-preview > main { + min-height: calc(100vh - 8.8rem); + padding: 1rem; + background: #eef0f3; +} + +.risk-conversation-preview > main > p { + margin: 0 0 1rem; + color: #8b929b; + font-size: 0.75rem; + text-align: center; +} + +.risk-conversation-preview main > div { + width: fit-content; + max-width: 78%; + margin-bottom: 0.65rem; + padding: 0.7rem 0.85rem; + border-radius: 0.35rem; + background: #fff; + line-height: 1.5; +} + +.risk-conversation-preview main > div.mine { + margin-left: auto; + background: #bde7a9; +} + +.risk-conversation-preview > footer { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 4.3rem; + padding: 0.6rem 1rem max(0.6rem, env(safe-area-inset-bottom)); + border-top: 1px solid #e0e3e7; + color: #959ca5; + background: #fff; +} + +.risk-conversation-preview > footer span { + width: calc(100% - 2.7rem); + padding: 0.65rem 0.75rem; + border: 1px solid #e0e3e7; + border-radius: 0.3rem; + background: #f7f8f9; +} + +.risk-overlay { + display: grid; + position: absolute; + z-index: 70; + inset: 0; + place-items: center; + padding: 1rem; + background: rgba(19,23,28,0.55); +} + +.risk-dialog { + width: min(100%, 25rem); + max-height: calc(100% - 2rem); + padding: 1.15rem; + overflow-y: auto; + border-radius: 0.55rem; + background: #fff; + text-align: center; +} + +.risk-symbol { + display: grid; + place-items: center; + width: 5rem; + height: 5rem; + margin: 0 auto 0.6rem; + border-radius: 50%; + color: #fff; + background: #3979cd; +} + +.risk-dialog.secondary .risk-symbol { + color: #9b5e08; + background: #fff0d5; +} + +.risk-symbol .material-icons { + font-size: 3.2rem; +} + +.risk-dialog h2 { + margin: 0; + font-size: 1.35rem; +} + +.risk-dialog > p { + margin: 0.75rem 0; + color: #4d555e; + line-height: 1.65; + text-align: left; +} + +.risk-dialog > p.risk-emphasis { + color: #b1363f; + font-weight: 650; + text-align: center; +} + +.risk-dialog ul { + margin: 0.9rem 0; + padding: 0.25rem 0.75rem; + border: 1px solid #d9e5f4; + border-radius: 0.4rem; + list-style: none; +} + +.risk-dialog li { + display: flex; + align-items: center; + min-height: 2.7rem; + border-bottom: 1px solid #e7edf4; + line-height: 1.35; + text-align: left; +} + +.risk-dialog li:last-child { + border-bottom: 0; +} + +.risk-dialog li .material-icons { + margin-right: 0.55rem; + color: #347bd7; + font-size: 1.35rem; +} + +.risk-dialog aside { + display: flex; + align-items: flex-start; + gap: 0.5rem; + margin: 0.8rem 0; + padding: 0.7rem; + border-radius: 0.35rem; + color: #9e333b; + background: #fff0f1; + line-height: 1.45; + text-align: left; +} + +.risk-dialog button { + width: 100%; + min-height: 3rem; + margin: 0.45rem 0 0; + padding: 0 0.75rem; + border: 0; + border-radius: 0.35rem; + box-shadow: none; + color: #7f8790; + background: transparent; +} + +.risk-dialog button.primary { + color: #fff; + background: #347bd7; +} + +.risk-dialog button.danger { + color: #fff; + background: #cc3d46; +} + +.report-reasons { + padding-bottom: 1rem; +} + +.report-target { + display: grid; + grid-template-columns: 3.5rem minmax(0, 1fr) 2rem; + align-items: center; + gap: 0.75rem; + min-height: 5.3rem; + padding: 0.8rem 1rem; + background: #fff; +} + +.report-target img { + width: 3.5rem; + height: 3.5rem; + border-radius: 0.45rem; + object-fit: cover; +} + +.report-target span, +.report-target strong, +.report-target small { + display: block; + min-width: 0; +} + +.report-target small { + margin-top: 0.25rem; + color: #818a94; +} + +.report-target > .material-icons { + color: #3b8661; +} + +.report-reasons > h2 { + margin: 0; + padding: 1rem; + color: #6e7781; + font-size: 0.85rem; + font-weight: 500; +} + +.report-reason-list { + background: #fff; +} + +.report-reason-list button { + display: grid; + grid-template-columns: 2.8rem minmax(0, 1fr) 1.5rem; + align-items: center; + gap: 0.55rem; + width: 100%; + min-height: 4.3rem; + margin: 0; + padding: 0.65rem 1rem; + border: 0; + border-bottom: 1px solid #eceef1; + border-radius: 0; + box-shadow: none; + color: #30353c; + background: #fff; + text-align: left; +} + +.report-reason-list button > span:first-child { + display: grid; + place-items: center; + width: 2.5rem; + height: 2.5rem; + border-radius: 0.4rem; + color: #fff; + background: #4d70a8; +} + +.report-reason-list button > span:nth-child(2), +.report-reason-list strong, +.report-reason-list small { + display: block; + min-width: 0; +} + +.report-reason-list small { + margin-top: 0.2rem; + overflow: hidden; + color: #858d97; + font-size: 0.76rem; + text-overflow: ellipsis; + white-space: nowrap; +} + +.report-reason-list button > .material-icons:last-child { + color: #a8aeb5; +} + +.report-details, +.feedback-page > main { + padding-bottom: 1rem; +} + +.report-selected-reason { + display: grid; + grid-template-columns: 2.7rem minmax(0, 1fr) auto; + align-items: center; + gap: 0.7rem; + padding: 0.9rem 1rem; + background: #fff; +} + +.report-selected-reason > .material-icons { + color: #b14650; + font-size: 2rem; +} + +.report-selected-reason span, +.report-selected-reason strong, +.report-selected-reason small { + display: block; + min-width: 0; +} + +.report-selected-reason small { + margin-bottom: 0.2rem; + color: #858d96; +} + +.report-selected-reason button { + min-height: 2.5rem; + margin: 0; + padding: 0 0.5rem; + border: 0; + box-shadow: none; + color: #3476ce; + background: transparent; +} + +.support-textarea { + display: block; + position: relative; + margin-top: 0.7rem; + padding: 1rem; + background: #fff; +} + +.support-textarea > span { + display: block; + margin-bottom: 0.6rem; + font-weight: 600; +} + +.support-textarea b { + margin-left: 0.2rem; + color: #d6424b; +} + +.support-textarea textarea { + display: block; + width: 100%; + height: 10.5rem; + margin: 0; + padding: 0.75rem 0.8rem 2rem; + resize: vertical; + border: 1px solid #dfe3e7; + border-radius: 0.35rem; + box-shadow: none; + background: #fff; + line-height: 1.5; +} + +.support-textarea > small { + position: absolute; + right: 1.8rem; + bottom: 1.6rem; + color: #9ba2ab; +} + +.evidence-section, +.feedback-upload { + margin-top: 0.7rem; + padding: 1rem; + background: #fff; +} + +.evidence-section > header, +.feedback-upload > header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.6rem; + margin-bottom: 0.8rem; +} + +.evidence-section header span, +.evidence-section header strong, +.evidence-section header small, +.feedback-upload header span, +.feedback-upload header strong, +.feedback-upload header small { + display: block; + min-width: 0; +} + +.evidence-section header small, +.feedback-upload header small { + margin-top: 0.2rem; + color: #858d96; +} + +.evidence-section header em, +.feedback-upload header em { + color: #858d96; + font-style: normal; +} + +.evidence-section article { + display: grid; + grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; + align-items: center; + min-height: 3.5rem; + border-bottom: 1px solid #eceef1; +} + +.evidence-section article > .material-icons { + color: #5273a8; +} + +.evidence-section article > span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.evidence-section article button { + display: grid; + place-items: center; + width: 2.5rem; + height: 2.5rem; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + color: #989fa7; + background: transparent; +} + +.evidence-upload, +.feedback-upload > button { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + min-height: 4.5rem; + margin: 0; + padding: 0.7rem; + border: 1px dashed #cbd1d8; + border-radius: 0.35rem; + box-shadow: none; + color: #3476ce; + background: #f8f9fa; + flex-direction: column; +} + +.evidence-upload .material-icons, +.feedback-upload > button .material-icons { + margin-bottom: 0.25rem; + font-size: 1.8rem; +} + +.report-privacy-note { + display: flex; + align-items: flex-start; + gap: 0.5rem; + margin: 0.8rem 1rem 0; + color: #74808b; + font-size: 0.78rem; + line-height: 1.45; +} + +.report-privacy-note .material-icons { + color: #4b8065; + font-size: 1.05rem; +} + +.support-submit-bar { + padding: 0.75rem 1rem max(0.8rem, env(safe-area-inset-bottom)); + border-top: 1px solid #e1e4e8; + background: #fff; + flex: none; +} + +.support-submit-bar button, +.support-success > button { + width: 100%; + min-height: 3.1rem; + margin: 0; + padding: 0 1rem; + border: 0; + border-radius: 0.35rem; + box-shadow: none; + color: #fff; + background: #347bd7; + font-weight: 600; +} + +.support-success { + display: flex; + align-items: center; + padding: 4rem 1.2rem 1.5rem; + text-align: center; + flex-direction: column; +} + +.support-success > .material-icons { + color: #3a9365; + font-size: 5rem; +} + +.support-success h2 { + margin: 1rem 0 0.55rem; + font-size: 1.35rem; +} + +.support-success > p { + max-width: 26rem; + margin: 0; + color: #66707a; + line-height: 1.6; +} + +.support-success dl { + width: min(100%, 26rem); + margin: 1.5rem 0; + padding: 0.5rem 1rem; + border: 1px solid #e0e4e8; + border-radius: 0.4rem; + background: #fff; +} + +.support-success dl > div { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 3rem; + border-bottom: 1px solid #eceef1; +} + +.support-success dl > div:last-child { + border-bottom: 0; +} + +.support-success dt, +.support-success dd { + margin: 0; +} + +.support-success dt { + color: #7c858f; +} + +.support-success > button { + width: min(100%, 26rem); +} + +.feedback-categories { + padding: 1rem; + background: #fff; +} + +.feedback-categories h2 { + margin: 0 0 0.8rem; + font-size: 1rem; +} + +.feedback-categories > div { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 0.55rem; +} + +.feedback-categories button { + display: flex; + align-items: center; + min-width: 0; + min-height: 4.5rem; + margin: 0; + padding: 0.45rem; + border: 1px solid #e0e4e8; + border-radius: 0.35rem; + box-shadow: none; + color: #666f79; + background: #fff; + flex-direction: column; +} + +.feedback-categories button.active { + border-color: #347bd7; + color: #2f70c7; + background: #eef5ff; +} + +.feedback-categories .material-icons { + margin-bottom: 0.25rem; + font-size: 1.45rem; +} + +.feedback-categories button span { + width: 100%; + overflow-wrap: anywhere; + font-size: 0.76rem; + line-height: 1.25; + text-align: center; +} + +.feedback-contact { + display: block; + padding: 1rem; + background: #fff; +} + +.feedback-contact > span { + display: block; + margin-bottom: 0.55rem; + font-weight: 600; +} + +.feedback-contact input { + width: 100%; + height: 3rem; + margin: 0; + padding: 0 0.75rem; + border: 1px solid #dfe3e7; + border-radius: 0.35rem; + box-shadow: none; + background: #fff; +} + +.diagnostics-consent { + display: grid; + grid-template-columns: 1.8rem minmax(0, 1fr); + align-items: flex-start; + gap: 0.5rem; + margin-top: 0.7rem; + padding: 1rem; + background: #fff; +} + +.diagnostics-consent input { + width: 1.25rem; + height: 1.25rem; + margin: 0.1rem 0 0; +} + +.diagnostics-consent span, +.diagnostics-consent strong, +.diagnostics-consent small { + display: block; + min-width: 0; +} + +.diagnostics-consent small { + margin-top: 0.3rem; + color: #7e8791; + line-height: 1.45; +} + +@media screen and (max-width: 480px) { + .risk-dialog { + padding: 1rem; + } + + .risk-symbol { + width: 4.3rem; + height: 4.3rem; + } + + .risk-symbol .material-icons { + font-size: 2.8rem; + } + + .feedback-categories > div { + gap: 0.35rem; + } +} diff --git a/src/views/acc-security-view.jsx b/src/views/acc-security-view.jsx index 8272d1c8..ba3afc8e 100644 --- a/src/views/acc-security-view.jsx +++ b/src/views/acc-security-view.jsx @@ -130,6 +130,18 @@ class AccSecurityView extends React.Component {
+
+ + + +
+
{e.preventDefault(); this.props.onLogout();}}> exit_to_app   HashNavigation.navigateTo(view); + +function Icon({children, className = ''}) { + return ; +} + +function AppMark({tenantName}) { + return
+
J
+

{tenantName || '即时通讯'}

+
; +} + +function Header({title, back = 'tenant'}) { + return
+ +

{title}

+ +
; +} + +function Field({icon, action, error, className = '', ...props}) { + return
+
+ {icon ? {icon} : null} + + {action} +
+ {error ?
{error}
: null} +
; +} + +function PasswordField(props) { + const [visible, setVisible] = React.useState(false); + return setVisible(!visible)} + aria-label={visible ? '隐藏密码' : '显示密码'}>{visible ? 'visibility' : 'visibility_off'}} />; +} + +function Agreement({checked, onChange, prefix = '同意捷信密使'}) { + return
e.preventDefault()}>《用户协议》 和 e.preventDefault()}>《隐私政策》 + ; +} + +function Toast({message, onDone}) { + React.useEffect(() => { + if (!message) return undefined; + const timer = window.setTimeout(onDone, 2800); + return () => window.clearTimeout(timer); + }, [message, onDone]); + return message ?
check_circle{message}
: null; +} + +function TenantEntry({onTenantSelected}) { + const [code, setCode] = React.useState(sessionStorage.getItem('im-tenant-code') || ''); + const [error, setError] = React.useState(''); + + const submit = e => { + e.preventDefault(); + const value = code.trim(); + if (!value || value.length > 64) { + setError(value ? '企业码不能超过 64 个字符' : '请输入企业码'); + return; + } + sessionStorage.setItem('im-tenant-code', value); + sessionStorage.setItem('im-tenant-name', value === 'acme' ? '示例企业' : value); + onTenantSelected(value); + navigate('login'); + }; + + return
+ +
+ + { setCode(e.target.value); setError(''); }} + placeholder="请输入企业码" autoComplete="organization" maxLength="64" error={error} autoFocus /> + + + +
; +} + +function Login({tenantName}) { + const [account, setAccount] = React.useState(''); + const [password, setPassword] = React.useState(''); + const [agreed, setAgreed] = React.useState(false); + const [error, setError] = React.useState(''); + const [toast, setToast] = React.useState(''); + + const submit = e => { + e.preventDefault(); + if (!account.trim() || !password || !agreed) return; + if (password === 'error') { + setPassword(''); + setError('账号或密码错误'); + } else { + setToast('登录成功'); + window.setTimeout(() => navigate('messages-home'), 500); + } + }; + + return
+ +
+ + {error ?
error_outline{error}
: null} + { setAccount(e.target.value); setError(''); }} + placeholder="请输入用户名/手机号" autoComplete="username" /> + { setPassword(e.target.value); setError(''); }} + placeholder="请输入密码" autoComplete="current-password" /> +
+ +

没有账户?

+ + + setToast('')} /> +
; +} + +function EnterpriseRegister() { + const [creditCode, setCreditCode] = React.useState(''); + const [email, setEmail] = React.useState(''); + const [file, setFile] = React.useState(null); + const [errors, setErrors] = React.useState({}); + const [submitted, setSubmitted] = React.useState(sessionStorage.getItem('im-enterprise-application-status') === 'received'); + const [toast, setToast] = React.useState(''); + + React.useEffect(() => () => file && URL.revokeObjectURL(file.url), [file]); + + const chooseFile = e => { + const selected = e.target.files[0]; + if (!selected) return; + if (selected.size > 10 * 1024 * 1024 || !['image/jpeg', 'image/png', 'image/webp', 'application/pdf'].includes(selected.type)) { + setErrors({...errors, file: '支持 JPG、PNG、WebP、PDF,文件不超过 10MB'}); + return; + } + if (file) URL.revokeObjectURL(file.url); + setFile({name: selected.name, type: selected.type, url: URL.createObjectURL(selected)}); + setErrors({...errors, file: ''}); + }; + + const submit = e => { + e.preventDefault(); + const next = {}; + if (!CREDIT_CODE_RE.test(creditCode)) next.creditCode = '请输入 18 位统一社会信用代码'; + if (email && !EMAIL_RE.test(email)) next.email = '请输入有效的企业邮箱'; + setErrors(next); + if (Object.keys(next).length) return; + setSubmitted(true); + sessionStorage.setItem('im-enterprise-application-status', 'received'); + setToast('提交成功,我们会尽快联系你'); + }; + + return
+
+
+
    +
  1. 1填写企业信息
  2. +
  3. 2确定信息
  4. +
  5. 3提交审核
  6. +
+
+ + setCreditCode(e.target.value.trim().toUpperCase().replace(/[^0-9A-Z]/g, ''))} + placeholder="请输入18位统一社会信用代码" maxLength="18" icon="qr_code_scanner" error={errors.creditCode} /> +

请填写营业执照上的统一社会信用代码

+ + + + {file ? : null} + {errors.file ?
{errors.file}
: null} + + + setEmail(e.target.value)} + placeholder="请输入企业邮箱" type="email" error={errors.email} /> +

用于接收审核结果及企业通知

+ +

schedule资料提交后,预计 1 个工作日完成审核

+ +
+ setToast('')} /> +
; +} + +function EnterpriseFeedback() { + const [description, setDescription] = React.useState(''); + const [contact, setContact] = React.useState(''); + const [files, setFiles] = React.useState([]); + const [error, setError] = React.useState(''); + const [toast, setToast] = React.useState(''); + + const addFiles = e => { + const selected = Array.from(e.target.files || []).slice(0, 9 - files.length); + const valid = selected.filter(file => file.size <= 10 * 1024 * 1024 && ['image/jpeg', 'image/png', 'image/webp'].includes(file.type)); + setFiles(files.concat(valid.map(file => ({name: file.name, url: URL.createObjectURL(file)})))); + }; + const submit = e => { + e.preventDefault(); + const length = description.trim().length; + if (length < 10 || length > 1000) { + setError('问题描述需为 10 至 1000 个字符'); + return; + } + setToast('已收到反馈,我们会尽快处理'); + files.forEach(item => URL.revokeObjectURL(item.url)); + setDescription(''); setContact(''); setFiles([]); + }; + + return
+
+
+
+ +