/* LAST UPDATED: 11-21-2025 */
/* ***** BEGIN: Internal CSS from Kevin's Search Results mockup - putting here until we figure out what's "needed" where ***** */
body {
font-size: 16px;
}
.container {
max-width: 1400px;
}
.header {
border-bottom: 0;
}
.bg-psn-blue {
background-color: #2c72b7;
}
.bg-psn-blue a {
color: #fff;
text-decoration: none;
}
.bg-psn-blue a:hover,
.bg-psn-blue a:focus {
color: #fff;
text-decoration: underline;
}
.nav-tabs {
border-bottom: 5px solid #2c72b7;
color: #2c72b7;
}
.nav-tabs .nav-link {
color: #2c72b7;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
border-bottom: 0;
border: 1px solid #2c72b7;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
background-color: #2c72b7;
color: #fff;
border: 0;
}
/* for the sidebar cards on the SERP */
.card.no-border-no-radius-card {
border: 0;
border-radius: 0;
}
.card .card-header {
font-size: 1rem;
color: #fff;
background-color: #2c72b7;
border: 0;
border-radius: 0;
}
.accordion button,
.accordion a,
.dropdown-toggle {
font-size: 1rem;
}
.accordion a {
color: #2c72b7;
background-color: transparent;
}
.accordion-button,
.accordion-button:not(.collapsed) {
background-color: #E9E9EA;
}
.accordion-item {
border-bottom: 1px solid #ccc;
}
.dropdown-toggle::after {
display: inline-block;
}
.dropdown-item {
color: #2c72b7;
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: #2c72b7;
color: #fff;
}
#actions {
font-size: 24px;
}
.input-group .btn svg {
margin-right: 0;
}
#selectedActions button,
#actions button {
width: 36px;
height: 30px;
}
#actions .btn svg,
#selectedActions .btn svg {
max-width: 100%;
height: auto;
margin-right: 0;
min-height: 20px;
}
.tab-pane.active a {
color: #003A70;
background-color: #FFFFFF;
border-color: #003A70;
}
li.active a {
color: #FFFFFF;
background-color: #003A70;
border-color: #003A70;
}
.result .custom-control-label {
top: -17px !important;
}
.custom-radio .custom-control-input:checked~.custom-control-label::before,
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
background-color: #003A70;
}
/* ***** END: Internal CSS from Kevin's Search Results mockup - putting here until we figure out what's "needed" where ***** */
body.psycnet {
background: rgb(255, 255, 255);
background: linear-gradient(45deg, rgba(255, 255, 255, 1) 20%, rgba(44, 114, 183, 1) 100%);
}
/* using SVG for external link icon, for any target="_blank" anchors - modified from https://codepen.io/fathy_ar/pen/WNvZjgK */
a[target="_blank"]::after {
content: '';
-webkit-mask: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 1em 0.75em;
-webkit-mask-position: center;
mask: url("data:image/svg+xml;utf8,");
mask-repeat: no-repeat;
mask-size: 1em 0.75em;
mask-position: center;
display: inline-block;
background-color: currentcolor;
position: relative;
top: 0em;
width: 1em;
height: 1em;
left: 0.1em;
/* added this so icon is not totally against the link on display */
}
/* adding this so that the actual anchor and external link icon are never separated on different lines - revisit if this class is good for the mobile UX - horizontal scrollbars might show up for long links */
a.nowrap {
white-space: nowrap;
}
/*.psycnet #mainBodyContainer {
background: rgba(0,0,0,0.2);
}*/
header .banner .headLogo {
display: inline-block;
}
header .banner .headLogo img.large {
max-width: 250px;
}
.inline-block {
display: inline-block;
}
form#openAthensForm,
form#institutionEmailForm {
padding: 0 !important;
}
footer {
font-size: 14px;
}
footer a {
color: #2c72b7;
text-decoration: none;
}
footer a:hover,
footer a:focus {
color: #2c72b7;
text-decoration: underline;
}
.footer-links {
clear: both;
float: left;
/*margin: 0 0 0 -34px;*/
}
.footer-links li {
border-right: 1px solid #5e5e5e;
list-style: none;
float: left;
height: 20px;
/* revisit this */
margin: 0 5px 0 0;
}
.footer-links li:last-child {
border-right-style: none;
}
.footer-links a {
font-weight: 100;
text-align: center;
padding-top: 8px;
cursor: pointer;
font-size: 1.14em;
}
/*
.footer-links a[target="_blank"]::after {
content: '';
-webkit-mask: none;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 0;
-webkit-mask-position: center;
mask: none;
mask-repeat: repeat;
mask-position-x: 0%;
mask-position-y: 0%;
mask-size: auto;
mask-repeat: no-repeat;
mask-size: 0;
mask-position: center;
display: inline-block;
background-color: currentcolor;
position: relative;
top: 0;
width: 0;
height: 0;
left: 0;
}
*/
.footer-privacy {
border-top: 10px solid #c1c1c1 !important;
color: #2c72b7 !important;
}
.footer-socialicons {
font-size: 2em;
}
.footer-socialicons a {
display: inline-block;
width: 60px;
height: 40px;
}
.footer-socialicons a#facebook-link:hover,
.footer-socialicons a#facebook-link:focus {
color: #3b5998;
}
.footer-socialicons a#twitter-link:hover,
.footer-socialicons a#twitter-link:focus {
color: #0f1419;
}
.footer-socialicons a#youtube-link:hover,
.footer-socialicons a#youtube-link:focus {
color: #ff0000;
}
.footer-socialicons a#linkedin-link:hover,
.footer-socialicons a#linkedin-link:focus {
color: #0077b5;
}
.footer-privacy {
max-width: 570px;
}
footer p a {
text-decoration: underline;
}
@media screen and (max-width: 480px) {
header .banner .headLogo img.small {
display: inline-block;
max-height: 40px;
margin: 2px 0 0 10px;
padding: 0 0 5px 0;
}
}
@media screen and (max-width: 767px) {
header .banner .headLogo img.large {
height: auto;
margin: 0 0 0 10px;
}
}
@media screen and (min-width: 768px) and (max-width: 995px) {
header .banner .headLogo img.large {
margin-top: 0;
}
}
@media screen and (max-width: 991px) {
.footer-privacy {
max-width: 100%;
}
}
/* ***************** OVERRIDES FROM PL2.0 STYLESHEET ***************** */
.nav-link,
.standard-tabs .nav-tabs .nav-link:not(:disabled) {
text-decoration-line: none;
}
.standard-tabs .nav-tabs .nav-link.active {
background-color: #2c72b7;
padding-bottom: 10px;
color: #fff;
border: 0;
}
.standard-tabs .nav-tabs .nav-link:not(:disabled):not(.active):hover {
background-color: #F4F4F4;
color: #212529;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
background-color: #F4F4F4;
color: #212529;
}
/* ******* BEGIN: Placeholder styling ******* */
/* WebKit, Edge */
input#searchInput::-webkit-input-placeholder {
color: #333333;
font-size: 16px !important;
font-family: 'Lato', sans-serif !important;
}
/* Firefox 4-18 */
input#searchInput:-moz-placeholder {
color: #333333;
font-size: 16px !important;
font-family: 'Lato', sans-serif !important;
opacity: 1;
}
/* Firefox 19+ */
input#searchInput::-moz-placeholder {
color: #333333;
font-size: 16px !important;
font-family: 'Lato', sans-serif !important;
opacity: 1;
}
/* IE 10-11 */
input#searchInput:-ms-input-placeholder {
color: #333333;
font-size: 16px !important;
font-family: 'Lato', sans-serif !important;
}
/* Edge */
input#searchInput::-ms-input-placeholder {
color: #333333;
font-size: 16px !important;
font-family: 'Lato', sans-serif !important;
}
/* MODERN BROWSER */
input#searchInput::placeholder {
color: #333333;
font-size: 16px !important;
font-family: 'Lato', sans-serif !important;
}
/* ******* END: Placeholder styling ******* */
/* *********************** adapted from psycinfo css stylesheet *********************** */
.fa {
font-family: FontAwesome !important;
display: inline !important;
/* so that external link icons do not break onto new line in smaller viewports */
}
/* using SVG for external link icon, for any target="_blank" anchors - modified from https://codepen.io/fathy_ar/pen/WNvZjgK */
a[target="_blank"]::after {
content: '';
-webkit-mask: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 1em 0.75em;
-webkit-mask-position: center;
mask: url("data:image/svg+xml;utf8,");
mask-repeat: no-repeat;
mask-size: 1em 0.75em;
mask-position: center;
display: inline-block;
background-color: currentcolor;
position: relative;
top: 0em;
width: 1em;
height: 1em;
left: 0.1em;
/* added this so icon is not totally against the link on display */
}
/* adding this so that the actual anchor and external link icon are never separated on different lines - revisit if this class is good for the mobile UX - horizontal scrollbars might show up for long links */
a.nowrap {
white-space: nowrap;
}
/* ************************************************* BEGIN: BUTTONS ************************************************* */
/* adding an XS button style, which doesn't exist in BS5 (nor BS4) - see https://stackoverflow.com/questions/33911049/btn-xs-no-longer-a-valid-option-in-bootstrap-4 - consider adding this to IUX PL */
.btn-group-xs>.btn,
.btn-xs {
padding: .25rem .4rem;
font-size: .875rem;
line-height: .5;
border-radius: 50px;
/* was .2rem - but, matching apapubs branding styles */
}
.btn-xs {
display: inline-block;
border-width: 1px;
/* default is 2px */
margin: 5px 10px 10px 0;
padding: .25rem .4rem;
line-height: 1;
font-weight: 500;
/* default is 700 */
box-sizing: border-box;
}
/* *** PUBS BRANDED BUTTONS - Note - might be able to remove these from this stylesheet as they are not added to the main PL stylesheet *** */
/* using this class in the modal "dismiss" button from IUX PL to align with APA Pubs branding guidelines */
.btn-apapub-squared-override {
border-radius: 0px !important;
}
/* *** RED BUTTONS *** */
/* squared */
.btn-pubs-1 {
background-color: #d22730;
color: #fff;
border-radius: 0px;
}
.btn-pubs-1:hover {
background-color: #93001c;
color: #efb1b6;
}
/* outline rounded */
.btn-pubs-4 {
background-color: #fff;
color: #d22730;
border: 2px solid #d22730;
border-radius: 50px;
}
.btn-pubs-4:hover {
background-color: #d22730;
color: #fff;
}
/* *** BLUE BUTTONS *** */
/* squared - solid blue */
.btn-pubs-2 {
background-color: #004c97;
color: #fff;
border-radius: 0px;
}
.btn-pubs-2:hover {
background-color: #003a70;
color: #7fbbdd;
}
/* outline rounded - blue */
.btn-pubs-5 {
background-color: #fff;
color: #004c97;
border: 2px solid #004c97;
border-radius: 50px;
}
.btn-pubs-5:hover {
background-color: #004c97;
color: #fff;
}
/* squared - blue outline button */
.btn-pubs-8 {
background-color: #fff;
color: #004c97;
border: 2px solid #004c97;
border-radius: 0px;
}
.btn-pubs-8:hover {
background-color: #004c97;
color: #fff;
}
/* *** PURPLE BUTTONS *** */
/* squared - solid purple */
.btn-pubs-3 {
background-color: #39207c;
color: #fff;
border-radius: 0px;
}
.btn-pubs-3:hover {
background-color: #221e44;
color: #a496c8;
}
/* squared - purple outline button */
.btn-pubs-7 {
background-color: #fff;
color: #39207c;
border: 2px solid #39207c;
border-radius: 0px;
}
.btn-pubs-7:hover {
background-color: #39207c;
color: #fff;
}
/* outline rounded - purple */
.btn-pubs-6 {
background-color: #fff;
color: #39207c;
border: 2px solid #39207c;
border-radius: 50px;
}
.btn-pubs-6:hover {
background-color: #39207c;
color: #fff;
}
/* GetFTR buttons */
/* outline */
.getftr-1 {
background-color: #fff;
color: #096a73;
border: 2px solid #096a73;
border-radius: 0;
text-transform: none;
}
.getftr-1:hover {
background-color: #d6f2f7;
}
/* green fill */
.getftr-2 {
background-color: #096a73;
color: #fff;
border: 2px solid #096a73;
border-radius: 0;
text-transform: none;
}
.getftr-2:hover {
background-color: #053e44;
color: #fff;
border: 2px solid #053e44;
}
/* updates button - added 6-2024 - updated 11-2024 */
.getftr-updates {
background-color: #946F00;
/* note that the #BB8C00 from their website is not color contract accessible, so going darker */
color: #fff;
border: 2px solid #946F00;
border-radius: 0;
text-transform: none;
}
.getftr-updates:hover {
background-color: #614900;
color: #fff;
border: 2px solid #614900;
}
/* used in the updates popover with Fontawesome icon */
.getftrupdates-icon {
color: #946F00;
margin-right: 4px;
}
/* retraction button - added 6-2024 - updated 11-2024 */
.getftr-retraction {
background-color: #861515;
color: #fff;
border: 2px solid #861515;
border-radius: 0;
text-transform: none;
}
.getftr-retraction:hover {
background-color: #5a0e0e;
color: #fff;
border: 2px solid #5a0e0e;
}
/* used in the retraction popover with Fontawesome icon */
.getftrretraction-icon {
color: #861515;
margin-right: 4px;
}
/* overriding active anchor styles for for the same design as .btn-pubs-5 XS being used on Visual Search POC (V6) */
.whitepillbutton {
background-color: #fff !important;
color: #004c97 !important;
border: 2px solid #004c97 !important;
border-radius: 50px !important;
line-height: 20px;
text-transform: none;
padding: .2rem 1.2rem .2rem;
white-space: normal !important;
/* to override .btn styles for fitting long strings in certain width modals */
}
.whitepillbutton:hover {
background-color: #004c97 !important;
color: #FFFFFF !important;
}
/* overriding active anchor styles for for the same design as .btn-pubs-5 XS - being used on Recent Searches pills with close X icons */
.whitepillbuttonclose {
background-color: #fff !important;
color: #004c97 !important;
border: 2px solid #004c97 !important;
border-radius: 50px !important;
line-height: 20px;
text-transform: none;
/* following styles make room for close X on right side */
padding: .2rem 1.2rem .2rem;
display: flex;
align-items: center;
justify-content: center;
white-space: normal !important;
/* to override .btn styles for fitting long strings in certain width modals */
}
.whitepillbuttonclose:hover {
background-color: #004c97 !important;
color: #FFFFFF !important;
}
.whitepillbuttonclose>.close {
margin-left: 10px;
}
.whitepillbuttonclose:hover>.close,
.whitepillbuttonclose>.close:not(:disabled):not(.disabled):hover,
.whitepillbuttonclose>.close:not(:disabled):not(.disabled):focus {
color: #FFFFFF;
opacity: .9;
}
/* for the .whitepillbutton being used with the search icon in it for "Recent Searches" on the "No Results" search page */
.whitepillbutton.whitepillbuttonWithIcon {
padding: 0.3rem 0.6rem 0.2rem;
}
/* ************ overrides from idembs5css.css - not sure why this file even needs to exist, look into that ************ */
.whitepillbuttonWithIcon svg {
/* max-width: 25px; */
margin-right: 5px;
/* was 10px */
/* min-width: 18px; */
}
/* for the search-type radio button group, making sure the Fontawesome icons (that render as SVGs) stay white when the button is "active" as has class .btnSelected and keeps the currentColor when just .btnDefault */
.btnSelected.btn-outline:hover svg path,
.btnSelected.btn-outline:active svg path,
.btnSelected.btn-outline:focus svg path {
fill: #FFFFFF;
}
.btnDefault.btn-outline:hover svg path,
.btnDefault.btn-outline:active svg path,
.btnDefault.btn-outline:focus svg path {
fill: currentColor;
}
/* 3-14-2024 from apaiuxpubs.css used on Polaris with PL1.0: Overriding Bootstrap 5 button (and anchor buttons using these classes) styles so that button text stacks for long text buttons - Remove media query 12-4-2024 to apply to all breakpoints */
.btn {
white-space: normal !important;
}
/* ************************************************* END: BUTTONS ************************************************* */
/* for the search info icons on the Keyword Search and Semantic Search views on Basic Search */
.info-icon {
color: #004c97;
font-size: 20px;
cursor: pointer;
margin-left: 5px;
}
.info-icon:hover {
color: #003a70;
}
.search-info-icon-placement {
position: relative;
top: -15px;
left: 10px;
z-index: 1;
}
/* **** custom popover styling - note that this is different than the popovers for the PA Full-Text HTML dictionary terms - so, I scoped out the styling with .popover-1 in the HTML and these custom styles - note the PA Full-Text popover has a color contrast issue with the link in the header **** */
.popover-1 {
--bs-popover-max-width: 400px;
/* default is 276px */
--bs-popover-border-color: #33BFD5;
--bs-popover-border-style: solid;
--bs-popover-border-width: 3px;
--bs-popover-border-radius: 10px;
--bs-popover-border-width: 3px;
--bs-popover-color: #212529;
--bs-popover-header-bg: #D6F2F7;
--bs-popover-arrow-width: 24px;
--bs-popover-arrow-height: 10px;
}
/* these styles might be able to be CSS variables also */
.popover-1 .close {
color: #212529;
opacity: 0.9;
margin-left: 8px;
font-size: 30px;
}
.popover-1 .close:hover {
color: #39207C;
}
/* this is different than what's in PL2.0 style.css, so see what works better */
.popover-1 .popover-header a.close {
text-decoration: none;
margin-top: -6px;
}
/* ********** AI chat interface - see https://codepen.io/Shankar-Aryal/pen/gbYBwLp ********** */
:root {
--primary-gradient: linear-gradient(135deg, #39207C, #3E52A3);
--secondary-gradient: linear-gradient(135deg, #00B18F, #007681);
--bg-color: #ffffff;
--chat-bg: #f8fafc;
--text-primary: #212529;
--text-secondary: #64748b;
--bot-message-bg: #f1f5f9;
--user-message-bg: #3E52A3;
/* was #818cf8 but failed color contrast */
--border-color: #e2e8f0;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] {
--bg-color: #0f172a;
--chat-bg: #212529;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--bot-message-bg: #334155;
--user-message-bg: #6366f1;
--border-color: #334155;
}
[data-theme="dark"] .card {
background-color: #343a40;
color: #f8f9fa;
}
[data-theme="dark"] .card-title {
background-color: #003A70;
color: #ffffff;
}
[data-theme="dark"] .alert-note {
color: #212529;
border-left: solid 4px #C7C8C9;
background-color: #F1F1F1;
border-radius: 0;
}
[data-theme="dark"] .whitepillbutton {
background-color: #343a40 !important;
color: #ffffff !important;
border: 2px solid #ffffff !important;
}
[data-theme="dark"] .whitepillbutton:hover {
background-color: #56606a !important;
}
[data-theme="dark"] .card .card-body p {
color: #ffffff !important;
}
[data-theme="dark"] .theme-container {
background-color: #343a40;
color: #f8f9fa;
}
[data-theme="dark"] .theme-container p {
color: #ffffff !important;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--bg-color);
color: var(--text-primary);
transition: all 0.3s ease;
min-height: 100vh;
}
.ai-insights-container {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.header-title {
display: flex;
align-items: center;
gap: 1rem;
}
.header-title h2 {
font-size: 1.5rem;
font-weight: 600;
}
.bot-status {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--text-secondary);
}
.status-indicator {
width: 8px;
height: 8px;
background: #10b981;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/*
.theme-toggle {
transition: all 0.3s ease;
display: inline;
width: 34px;
}
.theme-toggle:hover {
background-color: var(--bot-message-bg);
}
*/
.chat-container {
/* flex: 1; */
overflow-y: auto;
padding: 2rem 0.4rem;
background-color: var(--chat-bg);
scroll-behavior: smooth;
}
.message {
display: flex;
align-items: flex-start;
margin-bottom: 1.5rem;
opacity: 0;
transform: translateY(20px);
animation: messageAppear 0.5s ease forwards;
}
@keyframes messageAppear {
to {
opacity: 1;
transform: translateY(0);
}
}
.avatar {
width: 40px;
height: 40px;
border-radius: 12px;
margin-right: 1rem;
background: var(--primary-gradient);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
box-shadow: var(--shadow-md);
}
.user-message .avatar {
background: var(--secondary-gradient);
}
.message-bubble {
max-width: 85%;
padding: 1rem 1.5rem;
border-radius: 1rem;
box-shadow: var(--shadow-sm);
line-height: 1.5;
position: relative;
}
.bot-message .message-bubble {
background-color: var(--bot-message-bg);
border-top-left-radius: 0;
}
.user-message {
flex-direction: row-reverse;
}
.user-message .avatar {
margin-right: 0;
margin-left: 1rem;
}
.user-message .message-bubble {
background: var(--user-message-bg);
color: white;
border-top-right-radius: 0;
}
.typing-indicator {
display: none;
padding: 1rem 1.5rem;
background-color: var(--bot-message-bg);
border-radius: 1rem;
width: fit-content;
margin-left: 3.5rem;
box-shadow: var(--shadow-sm);
}
.typing-dots {
display: flex;
gap: 0.4rem;
}
.typing-dot {
width: 8px;
height: 8px;
background-color: var(--text-secondary);
border-radius: 50%;
animation: typingBounce 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(1) {
animation-delay: -0.32s;
}
.typing-dot:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes typingBounce {
0%,
80%,
100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
.input-container {
padding: 1.5rem;
background-color: var(--bg-color);
border-top: 1px solid var(--border-color);
box-shadow: var(--shadow-lg);
}
.input-wrapper {
display: flex;
gap: 1rem;
background-color: var(--chat-bg);
border-radius: 1rem;
padding: 0.5rem;
box-shadow: var(--shadow-sm);
}
.message-input {
flex: 1;
padding: 0.75rem 1rem;
border: none;
background: none;
color: var(--text-primary);
font-size: 1rem;
}
.message-input:focus {
outline: none;
}
.message-input::placeholder {
color: var(--text-secondary);
}
.action-buttons {
display: flex;
gap: 0.5rem;
padding: 0.5rem;
}
.action-button {
background: none;
border: none;
padding: 0.75rem;
color: var(--text-secondary);
cursor: pointer;
border-radius: 0.5rem;
transition: all 0.3s ease;
}
.action-button:hover {
background-color: var(--bot-message-bg);
color: var(--text-primary);
}
.send-button {
background: var(--primary-gradient);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
}
.send-button:hover {
opacity: 0.9;
transform: translateY(-1px);
}
@media (max-width: 768px) {
/* .container {
height: 100dvh;
}
*/
.header-title h1 {
font-size: 1.25rem;
}
.chat-container {
padding: 1rem;
}
.message-bubble {
max-width: 85%;
}
.input-container {
padding: 1rem;
}
}
/* hiding the default AI Assistance blurb */
.message.bot-message:first-of-type {
display: none;
}
/* *** AI Insights section styles *** */
.close-summary-section {
position: relative;
right: 0;
bottom: 45px;
float: right;
}
/* for the AI Insights & Summaries page */
#ai-insights-tips-icon {
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
/* default */
transition: color 0.2s ease-in-out;
}
#ai-insights-tips-icon:hover {
color: #D6F2F7;
/* hover color */
}
.ai-insights-tips-icon {
color: inherit;
/* inherit from parent */
font-size: 20px;
}
/* for AI Insights Cite icon > modal formatting */
.citationBody {
font-size: 18px;
line-height: 1.4;
padding: 20px 5px 20px 30px;
text-align: left;
text-indent: -30px;
}
/*
a.citation-anchor {
background-color: #D6F2F7;
padding: 3px;
font-weight: bold;
text-decoration: none;
font-size: inherit;
letter-spacing: 1px;
margin: 0 3px;
}
a.citation-anchor:hover {
background-color: #F4F4F4;
text-decoration: underline;
}
*/
/* Base style for all citation anchors */
a.citation-anchor {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; /* was 28px but need to be careful of having a big enough accessibile mobile tap target */
height: 24px; /* was 28px but need to be careful of having a big enough accessibile mobile tap target */
border-radius: 50%; /* circle */
background-color: #D6F2F7;
font-weight: bold;
font-size: 14px;
text-decoration: none;
color: #000;
margin: 0 2px;
transition: background-color 0.2s ease, color 0.2s ease;
cursor: pointer;
/* border: 1px solid #909291; */
}
/* Hover state */
a.citation-anchor:hover {
background-color: #F4F4F4;
text-decoration: none;
}
/* Container for expandable citations */
.citation-group {
display: inline-flex;
align-items: center;
position: relative;
}
/* Hidden extra citations by default */
.citation-group .extra-citations {
display: none;
margin-left: 6px;
overflow: hidden;
}
/* Smooth slide animation */
.citation-group.active .extra-citations {
display: inline-flex;
animation: slideDown 0.3s ease forwards;
}
.citation-group .extra-citations.hide {
animation: slideUp 0.3s ease forwards;
}
/* Keyframes for slide animation */
@keyframes slideDown {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-5px); }
}
/* ******* thumbs up/down and copy icon styles ******* */
/* ---------- layout & spacing ---------- */
.action-buttons,
.rating {
display: flex;
gap: 16px;
/* spacing between icon groups */
align-items: center;
}
.btn-icon {
display: inline-flex;
align-items: center;
font-size: 20px;
cursor: pointer;
user-select: none;
transition: transform .18s ease;
}
/* make sure any FA