.ms-accordion {
margin: 2em 0;
border: 1px solid #e9ecef;
border-radius: 8px;
background: #fff;
overflow: hidden;
}
.ms-accordion-toggle {
width: 100%;
padding: 1.25em 1.5em;
background: #f8f9fa;
border: none;
border-bottom: 1px solid #e9ecef;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
transition: background-color 0.2s ease;
min-height: 72px;
box-sizing: border-box;
}
.ms-accordion-toggle:hover {
background: #f1f3f5;
}
.ms-accordion-toggle:focus {
outline: 2px solid var(--primary, #555);
outline-offset: -2px;
}
.ms-accordion-toggle[aria-expanded="true"] {
background: #f1f3f5;
}
.ms-accordion-header {
display: flex;
align-items: center;
gap: 0.75em;
flex: 1;
min-height: 44px;
}
.ms-accordion-icon-img {
width: 1.75em;
height: 1.75em;
flex-shrink: 0;
color: var(--primary, #555);
}
.ms-accordion-title-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.2em;
flex: 1;
min-width: 0;
}
.ms-accordion-title {
font-size: 1.0625em;
font-weight: 600;
color: #333;
line-height: 1.4;
display: block;
}
.ms-accordion-description {
font-size: 0.875em;
color: #6c757d;
font-style: italic;
line-height: 1.4;
display: block;
} .ms-accordion-chevron {
width: 1.25em;
height: 1.25em;
position: relative;
flex-shrink: 0;
margin-left: 1em;
transition: transform 0.3s ease;
}
.ms-accordion-chevron::before,
.ms-accordion-chevron::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 0.7em;
background: #333;
transform: translate(-50%, -50%);
transition: transform 0.3s ease;
}
.ms-accordion-chevron::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.ms-accordion-toggle[aria-expanded="true"] .ms-accordion-chevron::after {
transform: translate(-50%, -50%) rotate(0deg);
} .ms-accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0 1.5em;
}
.ms-accordion-content[aria-hidden="false"] {
max-height: 600px;
padding: 1.5em;
} .ms-player-wrapper {
display: flex;
flex-direction: column;
align-items: center;
} .ms-button {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75em;
padding: 0.875em 1.75em;
background: var(--primary, #555);
color: #fff;
border: none;
border-radius: 6px;
font-size: 1em;
font-weight: 500;
cursor: pointer;
transition: opacity 0.2s ease;
}
.ms-button:hover:not(:disabled) {
opacity: 0.88;
}
.ms-button:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.ms-button.generating::after {
content: "";
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.5em;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: ms-spin 0.8s linear infinite;
}
@keyframes ms-spin {
to { transform: rotate(360deg); }
}
.ms-button-icon {
display: inline-block;
width: 1.25em;
height: 1.25em;
background: currentColor;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'%3E%3C/polygon%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'%3E%3C/polygon%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
}
.ms-button.playing .ms-button-icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='4' height='16'%3E%3C/rect%3E%3Crect x='14' y='4' width='4' height='16'%3E%3C/rect%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='4' height='16'%3E%3C/rect%3E%3Crect x='14' y='4' width='4' height='16'%3E%3C/rect%3E%3C/svg%3E");
} .ms-player {
display: none;
width: 100%;
margin-top: 1.25em;
padding-top: 1.25em;
border-top: 1px solid #e9ecef;
}
.ms-player.active {
display: block;
}
.ms-player audio {
display: none;
}
.ms-player-controls {
display: flex;
flex-direction: column;
gap: 0.75em;
width: 100%;
}
.ms-progress-container {
width: 100%;
padding: 4px 0;
order: 1;
}
.ms-progress-bar {
width: 100%;
height: 6px;
background: #e9ecef;
border-radius: 3px;
cursor: pointer;
position: relative;
display: block;
transition: height 0.2s ease;
}
.ms-progress-bar:hover {
height: 8px;
}
.ms-progress-fill {
height: 100%;
background: var(--primary, #555);
border-radius: 3px;
transition: width 0.1s linear;
width: 0%;
position: absolute;
top: 0;
left: 0;
min-width: 2px;
pointer-events: none;
}
.ms-controls-row {
display: flex;
align-items: center;
gap: 1em;
width: 100%;
order: 2;
}
.ms-play-pause {
display: flex;
align-items: center;
justify-content: center;
width: 2.75em;
height: 2.75em;
background: var(--primary, #555);
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
transition: opacity 0.2s ease;
flex-shrink: 0;
}
.ms-play-pause:hover {
opacity: 0.88;
}
.ms-play-pause svg {
width: 1.1em;
height: 1.1em;
fill: currentColor;
}
.ms-time {
font-size: 0.875em;
color: #6c757d;
white-space: nowrap;
margin-left: auto;
}
.ms-time-current {
color: #555;
}
.ms-time-duration {
color: var(--primary, #555);
} .ms-waiting-phrases {
margin: 1.25em 0;
min-height: 1.5em;
position: relative;
width: 100%;
display: flex;
justify-content: center;
}
.ms-waiting-phrase {
position: absolute;
width: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
text-align: center;
color: #6c757d;
font-style: italic;
font-weight: 500;
top: 0;
left: 0;
}
.ms-waiting-phrase.active {
opacity: 1;
} .ms-loader {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 4px;
height: 32px;
margin: 1em auto 0;
}
.ms-loader .bar {
width: 5px;
border-radius: 3px;
background: var(--primary, #555);
animation: ms-wave 1.2s ease-in-out infinite;
transform-origin: bottom;
}
.ms-loader .bar:nth-child(1) { height: 60%; animation-delay: 0s; }
.ms-loader .bar:nth-child(2) { height: 100%; animation-delay: 0.15s; }
.ms-loader .bar:nth-child(3) { height: 45%; animation-delay: 0.3s; }
.ms-loader .bar:nth-child(4) { height: 80%; animation-delay: 0.45s; }
.ms-loader .bar:nth-child(5) { height: 60%; animation-delay: 0.6s; }
@keyframes ms-wave {
0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
50%       { transform: scaleY(1);   opacity: 1; }
} .ms-generating-message {
margin-top: 1em;
padding: 0.75em 1.25em;
background: #f8f9fa;
color: #555;
border: 1px solid #dee2e6;
border-radius: 6px;
font-size: 0.9375em;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
}
.ms-generating-message::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
border: 2px solid rgba(85, 85, 85, 0.25);
border-top-color: var(--primary, #555);
border-radius: 50%;
animation: ms-spin 0.8s linear infinite;
flex-shrink: 0;
} .ms-error {
margin-top: 1em;
padding: 0.75em 1em;
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
border-radius: 4px;
font-size: 0.875em;
} @media (max-width: 767px) {
.ms-accordion {
margin: 1em 0;
}
.ms-accordion-toggle {
padding: 1em 1.25em;
min-height: 64px;
}
.ms-accordion-icon-img {
width: 1.5em;
height: 1.5em;
}
.ms-accordion-title {
font-size: 1em;
}
.ms-accordion-description {
font-size: 0.8125em;
}
.ms-accordion-content[aria-hidden="false"] {
padding: 1em 1.25em;
}
}