/* ========== CHAT AREA & LAYOUT ========== */
/* Chat Main Container */
.chat-main {
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
}

/* Chat Area */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: visible;
    transition: margin-right 0.3s ease;
}

/* Add gradient background elements to chat area */
.chat-background-lottie {
    position: fixed;
    width: 1400px;
    height: 1400px;
    left: calc(50% + 166px);
    bottom: -950px;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
    opacity: 0.8;
}

/* Mobile responsive positioning for lottie background */
@media (max-width: 900px) {
    .chat-background-lottie {
        left: 50%;
        transform: translateX(-50%);
    }

    .section-subtitle,
    .section-header {
        max-width: 690px;
    }
}

/* Chat Controls */
.chat-controls {
    position: absolute;
    top: 40px;
    right: 40px;
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 10;
}

.control-btn {
    background: #E7EDF3;
    border: none;
    padding: 0 24px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    box-shadow: none;
    position: relative;
}

.control-btn.new-chat {
    border-radius: 24px;
}

.control-btn:hover {
    background: #DCE8F5;
    transform: scale(1.02);
}

.control-btn.active {
    background: #DCE8F5;
}

.control-icon {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.new-chat-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_825_5860)'%3E%3Cpath d='M10.8057 11.6463L7.94434 12.0556L8.35288 9.19351L15.7113 1.83514C16.0365 1.50988 16.4777 1.32715 16.9376 1.32715C17.3976 1.32715 17.8388 1.50988 18.164 1.83514C18.4893 2.1604 18.672 2.60155 18.672 3.06153C18.672 3.52152 18.4893 3.96267 18.164 4.28793L10.8057 11.6463Z' stroke='%23809DBC' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.8931 2.65332L17.3459 5.10611' stroke='%23809DBC' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.2031 11.7344V17.5156C15.2031 17.8223 15.0813 18.1164 14.8645 18.3332C14.6476 18.5501 14.3535 18.6719 14.0469 18.6719H2.48438C2.17772 18.6719 1.88362 18.5501 1.66678 18.3332C1.44994 18.1164 1.32813 17.8223 1.32812 17.5156V5.95312C1.32812 5.64647 1.44994 5.35237 1.66678 5.13553C1.88362 4.91869 2.17772 4.79688 2.48438 4.79688H8.26562' stroke='%23809DBC' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_825_5860'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

/* Chat Container */
.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 40px 40px 300px 40px;
    overflow-y: auto;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
    align-items: center;
}

/* Bottom gradient for chat panel */
.chat-container::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: calc(332px);
    right: 0;
    height: 300px;
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    z-index: 8;
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: auto;
    margin-bottom: 0;
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    transition: opacity 0.15s ease;
}

/* ========== CHAT MESSAGES ========== */
.chat-message {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chat-message.user {
    align-items: flex-end;
}

.chat-message.ai {
    align-items: flex-start;
}

.message-bubble {
    max-width: 800px;
    width: 100%;
    border-radius: 24px;
    padding: 24px;
    position: relative;
}

.message-bubble.user {
    background: #f6f6f6;
    color: #000000;
    max-width: 600px;
    width: auto;
    margin-left: auto;
}

.message-bubble.ai {
    background: transparent;
    border: none;
    box-shadow: none;
}

.message-content {
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    line-height: 1.7;
    color: #000000;
    position: relative;
    z-index: 7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Readable line length and consistent vertical rhythm */
.message-content>p,
.message-content>ul,
.message-content>ol,
.message-content>blockquote,
.message-content>figure {
    max-width: 142ch;
}

.message-content p,
.message-content ul,
.message-content ol,
.message-content pre,
.message-content blockquote,
.message-content figure,
.message-content table,
.message-content .callout {
    margin-block: 16px;
}

/* Message Content Styling */
.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
    font-weight: var(--font-weight-bold);
    font-style: normal;
    margin: 24px 0 12px 0;
    color: #000000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.4;
}

/* Heading separators handled via JS-inserted .divider elements to avoid duplicates */

.message-content h1 {
    font-size: 20px;
}

.message-content h2 {
    font-size: 18px;
}

.message-content h3 {
    font-size: 16px;
}

.message-content h4 {
    font-size: 15px;
}

.message-content h5 {
    font-size: 14px;
}

.message-content h6 {
    font-size: 13px;
}

.message-content ul {
    list-style: disc;
    margin: 16px 0;
    padding-left: 20px;
}

.message-content ol {
    list-style: decimal;
    margin: 16px 0;
    padding-left: 20px;
}

.message-content li {
    margin: 6px 0 8px;
    line-height: 1.6;
}

/* Better nested list readability */
.message-content ul ul,
.message-content ol ol {
    margin: 6px 0 8px;
    padding-left: 18px;
}

.message-content input[type="checkbox"] {
    transform: translateY(1px);
    margin-right: 8px;
}

.message-content strong,
.message-content b {
    font-weight: var(--font-weight-semibold);
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.message-content em,
.message-content i {
    font-weight: var(--font-weight-medium);
    font-style: italic;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Handle bold italic combinations */
.message-content strong em,
.message-content strong i,
.message-content b em,
.message-content b i,
.message-content em strong,
.message-content i strong,
.message-content em b,
.message-content i b {
    font-weight: var(--font-weight-semibold);
    font-style: italic;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.message-content code {
    background: #f3f4f6;
    color: #1f2937;
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1.3;
    font-family: var(--code-font);
    font-size: 14px;
    font-weight: var(--code-font-weight);
    border: 1px solid #e5e7eb;
}

.message-content pre {
    background: #f8fafc;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 20px 0;
    border: 1px solid #e2e8f0;
    position: relative;
    /* for copy button positioning */
}

/* Unified header for tables and code blocks */
.message-content .content-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 0 0 0;
    padding: 8px 10px;
    background: #f3f6fa;
}

.message-content .content-header .copy-action {
    background: none;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #809dbc;
    cursor: pointer;
}

.message-content .content-header .copy-action svg {
    width: 18px;
    height: 18px;
}

.message-content .content-header .copy-action .copy-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: currentColor;
    -webkit-mask: url('../assets/images/Copy.svg') no-repeat center / contain;
    mask: url('../assets/images/Copy.svg') no-repeat center / contain;
}

.message-content .content-header .copy-action span {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
}

.message-content .content-header .copy-action:hover {
    color: #5F7286;
}

.message-content .content-header .copy-action:hover span {
    color: #5F7286;
}

.message-content .content-header .copy-action:hover .copy-icon {
    background: currentColor;
}

.message-content pre code {
    background: none;
    padding: 0;
    font-size: 14px;
    border: none;
    color: #1f2937;
}

/* Deprecated floating code copy button (replaced by header) */
.message-content pre.code-block .code-copy-btn {
    display: none;
}

/* svg styling no longer used */

/* img styling no longer used */

/* Copy-as-Markdown button (adjacent to copy) */
/* Removed Markdown copy button inside code blocks */

/* Collapsible code blocks */
.message-content pre.collapsible {
    max-height: 420px;
    overflow: auto;
}

.message-content pre.collapsible::after {
    content: '';
    position: sticky;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(to bottom, rgba(248, 250, 252, 0), rgba(248, 250, 252, 1));
    pointer-events: none;
}

.message-content pre .code-expand-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 2;
    width: auto;
    height: 28px;
    border: none;
    border-radius: 6px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    color: #809dbc;
    cursor: pointer;
}

.message-content pre.expanded {
    max-height: none;
}

.message-content pre.expanded::after {
    display: none;
}

.message-content blockquote {
    position: relative;
    margin: 20px 0;
    padding: 0 0 0 24px;
    color: #000000;
    font-style: italic;
    line-height: 1.6;
}

/* Vertical line for blockquote */
.message-content blockquote::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #E7EDF3;
    border-radius: 2px;
}

.message-content p {
    margin: 16px 0;
    line-height: 1.7;
}

.message-content .divider {
    background: #e6f1fc;
    height: 1px;
    width: 100%;
    margin: 28px 0;
    border: none;
}

/* Enhanced horizontal rule styling */
.message-content hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #e2e8f0 20%, #e2e8f0 80%, transparent 100%);
    margin: 28px 0;
}

/* Email-like formatting for structured content */
.message-content .email-template {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

/* Callout variants */
.message-content .callout.tip {
    background: #eef7ff;
    border-left-color: #3b82f6;
}

.message-content .callout.note {
    background: #f8fafc;
    border-left-color: #64748b;
}

.message-content .callout.warning {
    background: #fffbeb;
    border-left-color: #f59e0b;
}

.message-content .callout.success {
    background: #f0fdf4;
    border-left-color: #10b981;
}

.message-content .callout.danger {
    background: #fef2f2;
    border-left-color: #ef4444;
}

/* Media and captions */
.message-content figure {
    margin: 20px 0;
}

.message-content img {
    max-width: 100%;
    height: auto;
}

.message-content figcaption {
    margin-top: 8px;
    font-size: 13px;
    color: #64748b;
}

/* Highlighting and keyboard keys */
.message-content mark {
    background: #fff3c4;
    padding: 0 3px;
    border-radius: 3px;
}

.message-content kbd {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
}

/* Diff blocks */
.message-content .diff-add {
    background: #ecfdf5;
    color: #065f46;
}

.message-content .diff-del {
    background: #fef2f2;
    color: #991b1b;
    text-decoration: line-through;
}

/* Focus states and a11y */
.message-content button:focus-visible,
.message-content a:focus-visible {
    outline: 2px solid #075CFB;
    outline-offset: 2px;
    border-radius: 6px;
}

.message-content .email-template .subject {
    font-weight: var(--font-weight-semibold);
    color: #1e293b;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.message-content .email-template .greeting,
.message-content .email-template .signature {
    margin: 16px 0;
}

.message-content .email-template .body {
    margin: 16px 0;
    line-height: 1.8;
}

/* Table styling for better formatted content */
/* Table scroll wrapper ensures only the table scrolls horizontally */
.message-content .table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    margin: 20px 0;
    width: 100%;
    max-width: 100%;
    background: #fff;
}

.message-content .table-scroll-wrapper>.content-header {
    border-bottom: 1px solid #e2e8f0;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.message-content .code-block-wrapper {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    background: #fff;
    margin: 20px 0;
}

.message-content .code-block-wrapper>.content-header {
    border-bottom: 1px solid #e2e8f0;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.message-content .code-block-wrapper pre {
    border: none;
    border-radius: 0 0 12px 12px;
    margin: 0;
}

.message-content table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
}

/* Tables: captions, numeric alignment, sticky first column */
.message-content table caption {
    caption-side: top;
    text-align: left;
    color: #64748b;
    padding: 8px 4px 6px;
}

.message-content td.num,
.message-content th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Controls row below tables (e.g., Copy button) */
.message-content .table-copy-controls {
    margin: 8px 0 0 0;
}

.message-content .table-copy-controls .table-copy-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.1s ease;
    color: #809dbc;
}

.message-content .table-copy-controls .table-copy-btn:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.message-content .table-copy-controls .table-copy-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5px;
}

/* Align table viewport to the right edge for user messages */
.chat-message.user .message-content .table-scroll-wrapper {
    margin-left: auto;
}

.message-content th,
.message-content td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}

.message-content th {
    background: #f8fafc;
    font-weight: var(--font-weight-semibold);
    color: #1e293b;
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
    /* prevent header text from forcing narrow columns */
}

.message-content tr:last-child td {
    border-bottom: none;
}

/* Zebra striping and hover state for readability */
.message-content tbody tr:nth-child(even) {
    background: #fafafa;
}

.message-content tbody tr:hover {
    background: #F0F7FF;
    transition: background 0.15s ease;
}

/* Respect markdown text-align attributes from parsers */
.message-content td[style*="text-align: right"],
.message-content th[style*="text-align: right"] {
    text-align: right;
}

.message-content td[style*="text-align: center"],
.message-content th[style*="text-align: center"] {
    text-align: center;
}

/* Responsive horizontal scroll for wide tables on small screens */
@media (max-width: 768px) {
    .message-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Improved spacing for first and last elements */
.message-content>*:first-child {
    margin-top: 0;
}

.message-content>*:last-child {
    margin-bottom: 0;
}

/* Message Actions */
.message-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

.action-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.action-btn:hover {
    background: rgba(128, 157, 188, 0.1);
}

.action-btn svg {
    width: 14px;
    height: 14px;
    stroke: #809dbc;
    fill: none;
    stroke-width: 1.5px;
}

.action-btn img {
    width: 18px;
    height: 18px;
}

.action-btn.copy:hover img,
.action-btn.copy-md:hover img {
    color: #5F7286;
}

.action-btn.copy {
    width: 32px;
    height: 32px;
    padding: 6px;
}

.action-btn.copy svg {
    width: 18px;
    height: 18px;
}

.action-btn.copy-slack svg {
    width: 18px;
    height: 18px;
}

.action-btn.copy-md svg {
    width: 18px;
    height: 18px;
}

.action-btn.copy img {
    width: 18px;
    height: 18px;
}

/* Make Copy as Markdown match size and slightly larger icon */
.action-btn.copy-md {
    width: 32px;
    height: 32px;
    padding: 6px;
}

/* Compliance review button styling */
.action-btn.compliance-review {
    width: 32px;
    height: 32px;
    padding: 6px;
}

.action-btn.compliance-review img {
    width: 18px;
    height: 18px;
}

.action-btn.compliance-review:hover {
    background: #F0F7FF;
    color: #075CFB;
}

.action-btn.compliance-review:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: transparent;
    color: #809DBC;
}

/* Scale Markdown icon a bit smaller for balance next to copy icon */
.action-btn.copy-md img {
    width: 18px;
    height: 18px;
}

/* Slack copy action icon */
.action-btn.copy-slack {
    width: 32px;
    height: 32px;
    padding: 6px;
}

.action-btn.copy-slack img {
    width: 16px;
    height: 16px;
}

.action-btn.copy:hover,
.action-btn.copy-slack:hover {
    background: #F0F7FF;
    /* match compliance review hover */
}

/* ========== REUSABLE GRADIENT BORDER ========== */
.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1.5px;
    background: linear-gradient(45deg,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(255, 255, 255, 0.3) 25%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.3) 75%,
            rgba(255, 255, 255, 0.8) 100%);
    border-radius: 24px;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    pointer-events: none;
}

/* ========== CHAT INPUT ========== */
.chat-input-section {
    position: fixed;
    bottom: 40px;
    left: calc(50% + 166px);
    transform: translateX(-50%);
    background: transparent;
    padding-top: 0;
    width: 640px;
    max-width: 640px;
    z-index: 10;
}

/* ========== SLACK COMPOSE PANEL ========== */
.slack-compose-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 420px;
    /* from Figma Frame 6645 */
    max-width: 420px;
    background: #f1f4f7;
    border-left: 1px solid #E7EDF3;
    z-index: 20;
    display: none;
    overflow: auto;

}

.slack-compose-panel .slack-compose-inner {
    padding: 40px;
}

.slack-compose-panel .slack-logo img {
    width: 34px;
    height: 34px;
}

.slack-compose-panel .slack-title {
    font-family: var(--primary-font, 'Gilroy');
    font-weight: var(--font-weight-semibold, 600);
    font-size: 20px;
    line-height: 1.4;
    color: #000000;
    margin-top: 14px;
}

.slack-compose-panel .slack-description {
    font-family: var(--primary-font, 'Gilroy');
    font-weight: var(--font-weight-medium, 500);
    font-size: 16px;
    line-height: 1.4;
    color: #000000;
    margin-top: 14px;
    max-width: 340px;
}

.slack-compose-panel .slack-connect-btn,
.slack-compose-panel .slack-confirm-btn {
    margin-top: 16px;
    height: 40px;
    padding: 0 24px;
    background: #075CFB;
    border: 1px solid #075CFB;
    color: #FFFFFF;
    border-radius: 100px;
    font-family: var(--primary-font, 'Gilroy');
    font-weight: var(--font-weight-medium, 500);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.slack-compose-panel .slack-connect-btn:hover,
.slack-compose-panel .slack-confirm-btn:hover {
    background: #0056e6;
    border-color: #0056e6;
}

/* Slack panel states - only one should be visible at a time */
.slack-panel-state {
    display: none;
    width: 100%;
    height: 100%;
}

.slack-panel-state:first-child {
    display: block;
    /* Show first state by default */
}

/* When panel is open, show it and shift the chat area left by panel width */
body.slack-compose-open .slack-compose-panel {
    display: block;
}

body.slack-compose-open .chat-area {
    margin-right: 420px;
}

/* Keep the bottom input centered relative to messages when panel opens */
body.slack-compose-open .chat-input-section {
    left: calc(50% + 166px - 210px);
    /* approximate shift: half panel width */
}

#ask-anything-box {
    position: relative;
    background: rgba(238, 238, 238, 0.4);
    backdrop-filter: blur(14.4px);
    border: none;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0px 10px 24.1px -2px rgba(62, 71, 139, 0.25);
    transition: all 0.2s ease;
}

.ask-anything-input-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 15px;
}

.ai-avatar-small {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-avatar-small img,
.ai-avatar-small video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback for when video doesn't load */
.ai-avatar-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-avatar-fallback::before {
    content: "AI";
    color: white;
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ask-anything-input {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    color: #000000;
    background: transparent;
    line-height: 1.6;
    min-height: 20px;
    max-height: 120px;
    overflow-y: hidden;
    /* will be toggled to auto by JS when needed */
    /* allow scrolling when content exceeds max-height */
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Smooth scrollbar for WebKit */
    scrollbar-width: thin;
}

.ask-anything-input::placeholder {
    color: #809dbc;
    font-weight: var(--font-weight-medium);
}

.ask-anything-input:focus::placeholder {
    color: transparent;
}

.ask-anything-icon-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ask-anything-icons-left {
    display: flex;
    gap: 14px;
}

.ask-anything-icon {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.ask-anything-icon:hover {
    background: rgba(255, 255, 255, 0.3);
}

.ask-anything-icon img {
    width: 18px;
    height: 18px;
}

.chat-tools-add {
    position: relative;
}

.chat-tools-menu {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid #E7EDF3;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(7, 92, 251, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    padding: 8px 6px 6px 6px;
    min-width: 180px;
    display: none;
    z-index: 30;
}

.chat-tools-menu::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #ffffff;
    transform: translateX(-50%) rotate(45deg);
}

.chat-tools-menu.open {
    display: block;
}

.chat-tools-menu-header {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: #0f172a;
    padding: 6px 10px 8px 10px;
}

.chat-tools-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 10px 10px;
    cursor: pointer;
    color: #809DBC;
    font-size: 14px;
}

.chat-tools-menu-item:hover {
    background: #F0F7FF;
}

.chat-tools-menu-item img {
    width: 16px;
    height: 16px;
}

.ask-anything-send {
    background: #809dbc;
    border: none;
    padding: 5px;
    cursor: pointer;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.ask-anything-send img {
    width: 14px;
    height: 14px;
}

.ask-anything-send.has-content {
    background: #075CFB;
}

#ask-anything-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 auto;
    width: 100%;
}

/* Callout boxes for important information */
.message-content .callout {
    padding: 16px 20px;
    border-radius: 12px;
    margin: 20px 0;
    border-left: 4px solid;
}

.message-content .callout.info {
    background: #eff6ff;
    border-left-color: #3b82f6;
    color: #1e40af;
}

.message-content .callout.warning {
    background: #fffbeb;
    border-left-color: #f59e0b;
    color: #92400e;
}

.message-content .callout.success {
    background: #f0fdf4;
    border-left-color: #10b981;
    color: #065f46;
}

.message-content .callout.error {
    background: #fef2f2;
    border-left-color: #ef4444;
    color: #991b1b;
}

/* Notice boxes for policy reminders */
.message-content .notice {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin: 24px 0;
}

.message-content .notice-header {
    font-weight: var(--font-weight-semibold);
    color: #1e293b;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.message-content .notice-header::before {
    content: "ℹ️";
    font-size: 16px;
}

/* Formatted sections for templates */
.message-content .template-section {
    background: #fafafa;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
}

/* Definition lists for glossaries and structured content */
.message-content dl {
    margin: 20px 0;
}

.message-content dt {
    font-weight: var(--font-weight-semibold);
    color: #1e293b;
    margin-top: 16px;
    margin-bottom: 4px;
}

.message-content dt:first-child {
    margin-top: 0;
}

.message-content dd {
    margin-left: 20px;
    margin-bottom: 12px;
    line-height: 1.6;
    color: #000000;
}

/* Improved nested list styling */
.message-content ul ul,
.message-content ol ol,
.message-content ul ol,
.message-content ol ul {
    margin: 12px 0;
    padding-left: 20px;
}

/* Better spacing for nested elements */
.message-content blockquote p:last-child {
    margin-bottom: 0;
}

.message-content blockquote p:first-child {
    margin-top: 0;
}

/* Blockquote paragraph styling */
.message-content blockquote p {
    margin: 0 0 8px 0;
    line-height: 1.6;
    font-size: 16px;
    color: #000000;
    font-style: italic;
}

/* Attribution styling for blockquotes */
.message-content blockquote p:last-child {
    margin-bottom: 0;
    font-style: italic;
    color: #000000;
    font-size: 16px;
}

/* Improved link styling */
.message-content a {
    color: #075CFB;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color 0.2s ease;
}

.message-content a:visited {
    color: #6b86a8;
}

.message-content a {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.message-content a:hover {
    color: #0056cc;
}

.inline-reference-bubbles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.inline-reference-bubble {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #E7EDF3;
    border-radius: 100px;
    padding: 6px 12px 6px 6px;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: #222;
    cursor: default;
    gap: 8px;
    transition: background 0.15s;
}

.inline-reference-bubble .reference-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #F0F7FF;
    border-radius: 50%;
    margin: 0px 0px 0px 0px;
    flex-shrink: 0;
}

.inline-reference-bubble .reference-icon img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.inline-reference-bubble .reference-icon span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.inline-reference-bubble[style*="cursor: pointer"] {
    cursor: pointer;
}

.inline-reference-bubble[style*="cursor: pointer"]:hover {
    background: transparent;
    border-color: #075CFB;
    transform: none;
    box-shadow: none;
}

/* ========== PROCESSING INDICATOR ========== */
.processing-indicator {
    display: flex;
    margin: 16px 0;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    max-width: 400px;
    min-height: 32px;
    align-items: flex-start;
}

.processing-indicator:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.processing-indicator.expanded {
    border-color: #075CFB;
    box-shadow: 0 2px 8px rgba(7, 92, 251, 0.15);
    height: auto;
    align-items: flex-start;
}

.processing-content {
    width: 100%;
}

.processing-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: default;
    transition: cursor 0.2s ease;
    width: 100%;
}

.processing-header.expandable {
    cursor: pointer;
}

.processing-header.expandable:hover {
    cursor: pointer;
}

.processing-text {
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.processing-indicator .processing-status {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: #809DBC;
    transition: color 0.2s ease;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
}

.processing-details {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.processing-details.expanded {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    max-height: 500px;
    opacity: 1;
}

.processing-tool-calls {
    display: flex;
    flex-direction: column;
    padding-bottom: 8px;
}

.processing-tool-call {
    padding: 0;
    /* Reduce vertical spacing – handled by gap on parent */
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 15px;
}

.tool-call-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.tool-call-name {
    font-weight: var(--font-weight-medium);
    color: #809DBC;
}

.tool-call-number {
    font-size: 11px;
    color: #94a3b8;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* AI Avatar Small for Processing Indicator */
.processing-indicator .ai-avatar-small {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.processing-indicator .ai-avatar-small .ai-bubble-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.processing-indicator .ai-avatar-small .ai-avatar-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
}

/* Processing Icon (Dropdown) */
.processing-indicator .processing-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #64748b;
    transition: all 0.2s ease;
}

.processing-indicator .processing-icon svg {
    transition: transform 0.2s ease;
}

.processing-indicator:hover .processing-icon {
    color: #075CFB;
}

/* Two-column layout alignment */
.hris-sync-section .row.align-items-start {
    align-items: flex-start;
}

.hris-sync-section .section-header {
    margin-bottom: 0;
}

.hris-sync-section .section-header h2 {
    margin-bottom: 12px;
}

.hris-sync-section .section-header .section-subtitle {
    margin-bottom: 0;
}

/* ========== TYPING ANIMATION STYLES ========== */
/* Word-by-word typing animation */
.typing-word {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: inline-block;
    position: relative;
}

/* Ensure proper spacing and layout during typing */
.message-content .typing-word {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Smooth transition for revealed words */
.typing-word[style*="opacity: 1"] {
    opacity: 1 !important;
}

/* Ensure markdown elements maintain proper styling during typing */
.message-content h1 .typing-word,
.message-content h2 .typing-word,
.message-content h3 .typing-word,
.message-content h4 .typing-word,
.message-content h5 .typing-word,
.message-content h6 .typing-word {
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
}

.message-content strong .typing-word,
.message-content b .typing-word {
    font-weight: inherit;
}

.message-content em .typing-word,
.message-content i .typing-word {
    font-style: inherit;
}

.message-content code .typing-word {
    font-family: inherit;
    background-color: inherit;
    padding: inherit;
    border-radius: inherit;
}

/* Ensure proper cursor behavior during typing */
.message-content .typing-word:last-child {
    border-right: 2px solid transparent;
    animation: blink 1s infinite;
}

@keyframes blink {

    0%,
    50% {
        border-right-color: transparent;
    }

    51%,
    100% {
        border-right-color: currentColor;
    }
}

/* Remove cursor after typing is complete */
.message-content .typing-word:last-child:not([style*="opacity: 0"]) {
    border-right: none;
    animation: none;
}

/* ========== CHAT FILE PILLS ========== */

.chat-file-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 12px 0;
    margin-bottom: 0;
    min-height: 20px;
    width: 100%;
}

.chat-file-pill {
    display: inline-flex;
    align-items: center;
    background: #F0F7FF;
    border: 1px solid #E7EDF3;
    border-radius: 100px;
    padding: 6px 8px 6px 6px;
    font-size: 14px;
    font-weight: 500;
    color: #222;
    gap: 8px;
    transition: all 0.15s ease;
    max-width: 300px;
    min-width: 120px;
}

.chat-file-pill.pdf-file {
    border-color: #AEC3D8;
}

.chat-file-pill.word-file {
    border-color: #AEC3D8;
}

.chat-file-pill.generic-file {
    border-color: #AEC3D8;
}

.chat-file-pill:hover {
    border-color: #075CFB;
    box-shadow: 0 2px 4px rgba(7, 92, 251, 0.1);
}

.file-pill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #FFFFFF;
    border-radius: 50%;
    flex-shrink: 0;
}

.file-pill-icon img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.file-pill-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.file-pill-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.file-pill-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #F0F7FF;
    border: none;
    border-radius: 50%;
    color: #666;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.file-pill-close:hover {
    background: #E1F0FF;
    color: #075CFB;
    transform: scale(1.1);
}

.file-pill-close svg {
    width: 12px;
    height: 12px;
}

.file-pill-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-circle-bg {
    fill: none;
    stroke: #E7EDF3;
}

.progress-ring-circle {
    fill: none;
    stroke: #075CFB;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.15s ease;
}

/* Drag and drop styles for chat input section */
.chat-input-section.dragover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(7, 92, 251, 0.05);
    border: 2px dashed #075CFB;
    border-radius: 12px;
    pointer-events: none;
    z-index: 10;
}

/* Remove the message */
.chat-input-section.dragover::after {
    display: none;
}

/* Compliance Review Button Styles */
.compliance-review-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #FFFFFF;
    border: 1px solid #075CFB;
    border-radius: 20px;
    color: #075CFB;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 12px;
    font-family: inherit;
}

.compliance-review-button:hover {
    background: #F0F7FF;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(7, 92, 251, 0.15);
}

.compliance-review-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(7, 92, 251, 0.1);
}

.compliance-review-button img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.compliance-review-button span {
    white-space: nowrap;
}

/* Compliance Review Message Styles */
.compliance-review-message {
    margin: 16px 0;
    display: flex;
    justify-content: flex-start;
}

.compliance-review-bubble {
    background: transparent;
    border: none;
    padding: 0;
    max-width: none;
    box-shadow: none;
}

.compliance-review-bubble .compliance-review-button {
    margin-top: 0;
}

/* Upload Documents Button Styles */
.upload-documents-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #075CFB;
    border: 1px solid #075CFB;
    border-radius: 20px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 12px;
    font-family: inherit;
}

.upload-documents-button:hover {
    background: #0052E6;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(7, 92, 251, 0.25);
}

.upload-documents-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(7, 92, 251, 0.2);
}

.upload-documents-button img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.upload-documents-button span {
    white-space: nowrap;
}

/* Upload Documents Message Styles */
.upload-documents-message {
    margin: 16px 0;
    display: flex;
    justify-content: flex-start;
}

.upload-documents-bubble {
    background: transparent;
    border: none;
    padding: 0;
    max-width: none;
    box-shadow: none;
}

.upload-documents-bubble .upload-documents-button {
    margin-top: 0;
}

/* Tool Actions Container Styles */
.tool-actions-container {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

.tool-actions-container .compliance-review-button,
.tool-actions-container .upload-documents-button {
    margin-top: 0;
    flex-shrink: 0;
}


/* ========== CHAT TONE SELECTOR ========== */
.chat-tone-selector {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 12px;
}

.tone-trigger {
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.tone-trigger:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.1);
}

.tone-trigger img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.tone-menu {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 16px;
    min-width: 200px;
    z-index: 1000;
    display: none;
    margin-bottom: 8px;
}

.tone-menu::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #ffffff;
    transform: translateX(-50%) rotate(45deg);
}

.tone-menu.open {
    display: block;
}

.tone-menu-header {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    padding-bottom: 8px;
}

.tone-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    text-align: left;
    font-size: 14px;
    color: #809DBC;
    font-family: var(--primary-font);
    font-weight: var(--font-weight-medium);
}

.tone-menu-item:hover {
    background: #f8f9fa;
}

.tone-menu-item.selected {
    background: #F0F7FF;
    color: #075CFB;
}

.tone-menu-item img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.tone-menu-item.selected img {
    filter: invert(17%) sepia(94%) saturate(7400%) hue-rotate(214deg) brightness(101%) contrast(103%);

}

.tone-menu-item span {
    font-weight: 500;
}

/* Ensure proper layout in the icon row */
.ask-anything-icon-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.ask-anything-icons-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tone-menu {
        right: -20px;
        min-width: 180px;
    }

    .tone-trigger {
        width: 36px;
        height: 36px;
    }

    .tone-trigger img {
        width: 18px;
        height: 18px;
    }

    .chat-tone-selector {
        margin-right: 8px;
    }
}

/* Dropdown arrow rotation when open */
.slack-channel-selector .figma-multiselect-dropdown.open .figma-dropdown-arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* ========== SLACK MEMBER DROPDOWN ========== */
.slack-member-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 24px;
}

.slack-member-label {
    font-family: var(--primary-font, 'Gilroy');
    font-weight: var(--font-weight-semibold, 600);
    font-size: 16px;
    line-height: 1.4;
    color: #000000;
    white-space: nowrap;
}

.slack-member-dropdown {
    position: relative;
    flex: 1;
}

.slack-member-field {
    background: #809dbc;
    border-radius: 8px;
    height: 36px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background-color 0.2s;
    gap: 8px;
}

.slack-member-field:hover {
    background: #6b8ba8;
}

.slack-member-avatar {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    background-color: #ffffff;
}

.slack-member-name {
    font-family: var(--primary-font, 'Gilroy');
    font-weight: var(--font-weight-medium, 500);
    font-size: 14px;
    color: #ffffff;
    white-space: nowrap;
    flex: 1;
    text-align: left;
}

.slack-member-arrow {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slack-member-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}

.slack-member-dropdown.open .slack-member-arrow {
    transform: rotate(180deg);
}

.slack-member-options {
    position: absolute;
    top: 100%;
    right: 0;
    background: #ffffff;
    border: 2px solid #e7edf3;
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 4px;
    min-width: 280px;
    width: max-content;
}

.slack-member-option {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    gap: 12px;
    border-bottom: 1px solid #f0f0f0;
    min-width: 0;
    width: 100%;
}

.slack-member-option:last-child {
    border-bottom: none;
}

.slack-member-option:hover {
    background-color: #f8f9fa;
}

.slack-member-option.selected {
    background-color: #f0f7ff;
}

.slack-member-option-avatar {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    background-color: #e7edf3;
}

.slack-member-option-name {
    font-family: var(--primary-font, 'Gilroy');
    font-weight: var(--font-weight-medium, 500);
    font-size: 14px;
    color: #000000;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slack-member-option-email {
    font-family: var(--primary-font, 'Gilroy');
    font-weight: var(--font-weight-regular, 400);
    font-size: 12px;
    color: #666666;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slack-member-option-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* ========== SLACK DROPDOWN SHARED STYLES ========== */
.slack-divider {
    height: 1px;
    background: #d0e0f0;
    width: 100%;
    margin: 10px 0;
}

/* Generic selector styles that can be reused */
.slack-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 24px;
}

.slack-selector-label {
    font-family: var(--primary-font, 'Gilroy');
    font-weight: var(--font-weight-semibold, 600);
    font-size: 16px;
    line-height: 1.4;
    color: #000000;
    white-space: nowrap;
}

.slack-dropdown {
    position: relative;
    flex: 1;
}

.slack-dropdown-field {
    background: #809dbc;
    border-radius: 8px;
    height: 36px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background-color 0.2s;
    gap: 8px;
}

.slack-dropdown-field:hover {
    background: #6b8ba8;
}

.slack-dropdown-avatar {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    background-color: #ffffff;
}

.slack-dropdown-name {
    font-family: var(--primary-font, 'Gilroy');
    font-weight: var(--font-weight-medium, 500);
    font-size: 14px;
    color: #ffffff;
    white-space: nowrap;
    flex: 1;
    text-align: left;
}

.slack-dropdown-arrow {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slack-dropdown-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}

.slack-dropdown.open .slack-dropdown-arrow {
    transform: rotate(180deg);
}

.slack-dropdown-options {
    position: absolute;
    top: 100%;
    right: 0;
    background: #ffffff;
    border: 2px solid #e7edf3;
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 280px;
    width: max-content;
}

.slack-dropdown-option {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    gap: 12px;
    border-bottom: 1px solid #f0f0f0;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    user-select: none;
}

.slack-dropdown-option:hover {
    background-color: #f8f9fa;
}

.slack-dropdown-option:active {
    background-color: #e9ecef;
}

.slack-dropdown-option:last-child {
    border-bottom: none;
}

.slack-dropdown-option:hover {
    background-color: #f8f9fa;
}

.slack-dropdown-option.selected {
    background-color: #f0f7ff;
}

.slack-dropdown-option-avatar {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    background-color: #e7edf3;
}

.slack-dropdown-option-name {
    font-family: var(--primary-font, 'Gilroy');
    font-weight: var(--font-weight-medium, 500);
    font-size: 14px;
    color: #000000;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slack-dropdown-option-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.slack-dropdown-option-email {
    font-family: var(--primary-font, 'Gilroy');
    font-weight: var(--font-weight-regular, 400);
    font-size: 12px;
    color: #666666;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========== SLACK DROPDOWN CHECKBOXES ========== */
.slack-dropdown-checkbox {
    display: flex;
    align-items: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.slack-dropdown-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border: 2px solid #e7edf3;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    pointer-events: none;
}

.slack-dropdown-checkbox input[type="checkbox"]:checked {
    background: #075cfb;
    border-color: #075cfb;
}

.slack-dropdown-checkbox input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
}

.slack-dropdown-checkbox input[type="checkbox"]:hover {
    border-color: #075cfb;
}

.slack-dropdown-checkbox label {
    display: none;
}

/* ========== SLACK DROPDOWN SEARCH ========== */
.slack-dropdown-search {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #f8f9fa;
}

.slack-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e7edf3;
    border-radius: 6px;
    font-family: var(--primary-font, 'Gilroy');
    font-size: 14px;
    background: #ffffff;
    outline: none;
    transition: border-color 0.2s;
}

.slack-search-input:focus {
    border-color: #075cfb;
}

.slack-search-input::placeholder {
    color: #999;
}

/* ========== SLACK INLINE SEARCH INPUT ========== */
.slack-search-input-inline {
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    font-family: var(--primary-font, 'Gilroy');
    font-weight: var(--font-weight-medium, 500);
    font-size: 14px;
    color: #809dbc;
    outline: none;
    box-sizing: border-box;
}

.slack-search-input-inline::placeholder {
    color: #809dbc;
    opacity: 0.7;
}

.slack-search-input-inline:focus {
    color: #075cfb;
}

.slack-search-input-inline:focus::placeholder {
    color: #075cfb;
    opacity: 0.5;
}

/* ========== SLACK MESSAGE COMPOSER ========== */
.slack-message-input {
    margin-top: 24px;
    margin-bottom: 24px;
}

.slack-message-input .slack-selector-label {
    margin-bottom: 8px;
}

.slack-message-input textarea {
    width: 100%;
    min-height: 120px;
    padding: 16px;
    border: 2px solid #e7edf3;
    border-radius: 12px;
    font-family: var(--primary-font);
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.slack-message-input textarea:focus {
    outline: none;
    border-color: #075cfb;
}

.slack-message-input textarea::placeholder {
    color: #999;
}

/* ========== SLACK SCHEDULE INPUT ========== */
.slack-schedule-input {
    margin-bottom: 24px;
}

.slack-schedule-input .slack-selector-label {
    margin-bottom: 8px;
}



/* Current timestamp display */
.slack-timestamp-display {
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    color: #809dbc;
    margin-top: 8px;
    white-space: nowrap;
}

.slack-timestamp-display span {
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: normal;
    color: #809dbc;
}

/* Date/Time Picker */
.slack-datetime-picker {
    margin-top: 8px;
}

.slack-datetime-input {
    width: 100%;
    background: #ffffff;
    border: 2px solid #e6f1fc;
    border-radius: 8px;
    padding: 12px 16px;
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #2c3e50;
    outline: none;
    transition: border-color 0.2s ease;
}

.slack-datetime-input:focus {
    border-color: #075CFB;
    box-shadow: 0 0 0 3px rgba(7, 92, 251, 0.1);
}

.slack-datetime-input::-webkit-calendar-picker-indicator {
    background-color: transparent;
    cursor: pointer;
    filter: invert(0.5);
}

.slack-datetime-input::-webkit-calendar-picker-indicator:hover {
    filter: invert(0.3);
}

.slack-action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.slack-compose-btn,
.slack-send-btn,
.slack-cancel-btn {
    height: 40px;
    padding: 0 24px;
    border-radius: 100px;
    font-family: var(--primary-font);
    font-weight: var(--font-weight-medium);
    font-size: 14px;
    cursor: pointer;
    border: 1px solid;
    transition: all 0.2s;
}

.slack-compose-btn {
    background: #075CFB;
    border-color: #075CFB;
    color: #FFFFFF;
}

.slack-compose-btn:hover {
    background: #0056e6;
    border-color: #0056e6;
}

.slack-send-btn {
    background: #075CFB;
    border-color: #075CFB;
    color: #FFFFFF;
    flex: 1;
}

.slack-send-btn:hover {
    background: #0056e6;
    border-color: #0056e6;
}

/* Make recipient type dropdown only as wide as its content */
#slackRecipientTypeDropdown {
    flex: 0 0 auto;
    width: auto;
}

/* Make from dropdown only as wide as its content */
#slackFromDropdown {
    flex: 0 0 auto;
    width: auto;
}

/* Style individual and channel selection dropdowns differently - white background with padding */
#slackIndividualsDropdown .slack-dropdown-field,
#slackChannelsDropdown .slack-dropdown-field,
#slackChannelIndividualsDropdown .slack-dropdown-field {
    background: #ffffff;
    border: 2px solid #e6f1fc;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 12px;
    padding-bottom: 12px;
    height: auto;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#slackIndividualsDropdown .slack-dropdown-name,
#slackChannelsDropdown .slack-dropdown-name,
#slackChannelIndividualsDropdown .slack-dropdown-name {
    color: #809dbc;
    font-size: 14px;
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.4;
}

#slackIndividualsDropdown .slack-dropdown-arrow svg path,
#slackChannelsDropdown .slack-dropdown-arrow svg path,
#slackChannelIndividualsDropdown .slack-dropdown-arrow svg path {
    stroke: #809dbc;
}

.slack-dropdown.open .slack-dropdown-arrow svg {
    transform: rotate(180deg);
}

.slack-cancel-btn {
    background: transparent;
    border-color: #075CFB;
    color: #075CFB;
}

.slack-cancel-btn:hover {
    background: #075CFB;
    color: #FFFFFF;
}

/* ========== SLACK CHANNEL SELECTION OPTIONS ========== */
.slack-channel-options {
    display: flex;
    gap: 24px;
    margin-top: 16px;
    align-items: center;
    padding-left: 0;
}

.slack-channel-option {
    display: flex;
    align-items: center;
}

.slack-channel-option input[type="radio"] {
    display: none;
}

.slack-channel-option-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-family: var(--primary-font, 'Gilroy');
    font-weight: var(--font-weight-medium, 500);
    font-size: 14px;
    color: #000000;
    line-height: 1.4;
}

.slack-channel-option-radio {
    width: 10px;
    height: 10px;
    border: 2px solid #e7edf3;
    border-radius: 50%;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
}

.slack-channel-option input[type="radio"]:checked+.slack-channel-option-label .slack-channel-option-radio {
    border-color: #075cfb;
    background-color: #075cfb;
}

.slack-channel-option input[type="radio"]:checked+.slack-channel-option-label .slack-channel-option-radio::after {
    display: none;
}

.slack-channel-option-label:hover .slack-channel-option-radio {
    border-color: #075cfb;
}

/* Update slack-channel-selector to accommodate new layout */
.slack-channel-selector {
    margin-bottom: 24px;
}

.slack-channel-selector .slack-selector {
    margin-bottom: 0;
}

/* ========== SLACK RECIPIENT SELECTOR ========== */
.slack-recipient-selector {
    margin-bottom: 24px;
}

.slack-selection-container {
    margin-top: 16px;
    padding-left: 0;
}

.slack-selection-container .slack-selector {
    margin-bottom: 16px;
}

/* Responsive styles for Slack channel selection */
@media (max-width: 768px) {
    .slack-channel-options {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .slack-channel-option {
        width: 100%;
    }

    .slack-channel-option-label {
        width: 100%;
    }
}