/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */
/**
 * Unified Widget Styles
 * "One Widget to Rule Them All"
 */

/* Floating Action Button */
.unified-widget-fab {
    position: fixed !important;
    bottom: var(--spacing-md, calc(var(--spacing-lg) * 1.25)) !important;
    right: var(--spacing-md, calc(var(--spacing-lg) * 1.25)) !important;
    left: auto !important;
    width: var(--spacing-3xl);
    height: var(--spacing-3xl);
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
    border: 2px solid var(--color-info);
    color: var(--color-text-primary);
    font-size: 1.8rem;
    cursor: pointer;
    box-shadow: var(--glow-blue), var(--shadow-lg), 0 4px 20px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3);
    z-index: 9998;
    transition: all var(--transition-bounce);
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    position: relative;
    backdrop-filter: blur(10px);

.unified-widget-fab::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-info), var(--color-success));
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: -1;

.unified-widget-fab:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: var(--glow-blue), var(--shadow-xl), 0 0 40px rgba(var(--color-info-rgb, 91, 192, 222), 0.6);
    animation: fabHoverPulse 1.5s ease-in-out infinite;

.unified-widget-fab:hover::before {
    opacity: 0.3;
    animation: fabGradientRotate 3s linear infinite;

@keyframes fabHoverPulse {
    0%, 100% {
        box-shadow: var(--glow-blue), var(--shadow-xl), 0 0 40px rgba(var(--color-info-rgb, 91, 192, 222), 0.6);

    50% {
        box-shadow: var(--glow-blue), var(--shadow-xl), 0 0 50px rgba(var(--color-info-rgb, 91, 192, 222), 0.8);

@keyframes fabGradientRotate {
    0% {
        transform: rotate(0deg);

    100% {
        transform: rotate(360deg);

.unified-widget-fab:active {
    transform: scale(0.95) rotate(0deg);

.unified-widget-fab:focus {
    outline: 3px solid var(--color-text-primary);
    outline-offset: 3px;

/* Notification Badge */
.unified-widget-fab-badge {
    position: absolute;
    top: -var(--spacing-xs);
    right: -var(--spacing-xs);
    min-width: calc(var(--spacing-lg) * 1.25);
    height: calc(var(--spacing-lg) * 1.25);
    padding: 0 calc(var(--spacing-xs) * 1.5);
    background: var(--color-failure);
    border: 2px solid var(--color-bg-primary);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--glow-red), var(--shadow-md);
    animation: pulse 2s ease-in-out infinite;

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;

    50% {
        transform: scale(1.1);
        opacity: 0.9;

/* Widget Panel */
.unified-widget {
    position: fixed !important;
    /* Position will be managed by corner-widget-manager.css - DO NOT set bottom/right here */
    left: auto !important;
    width: 90%;
    max-width: 680px;
    max-height: 88vh;
    background: var(--color-bg-secondary);
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid var(--color-info);
    border-radius: var(--radius-xl);
    box-shadow: 
        var(--glow-blue), 
        var(--shadow-xl), 
        0 20px 60px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.9),
        inset 0 1px 0 rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.1);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px) scale(0.9);
    transition: all var(--transition-bounce);
    overflow: hidden;

/* Ensure widget uses flexbox layout properly */
.unified-widget {
    display: flex !important;
    flex-direction: column !important;

.unified-widget.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    animation: widgetEntrance 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

@keyframes widgetEntrance {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9) rotate(-2deg);

    60% {
        transform: translateY(-5px) scale(1.02) rotate(1deg);

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);

.unified-widget[aria-hidden="true"] {
    display: none;

/* Header */
.unified-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: calc(var(--spacing-xs) / 2) solid var(--color-info);
    background: linear-gradient(135deg, rgba(var(--color-info-rgb, 91, 192, 222), 0.2), rgba(var(--color-info-rgb, 91, 192, 222), 0.08));
    position: relative;
    overflow: hidden;
    flex-shrink: 0;

.unified-widget-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--spacing-xs) * 1.25);
    height: 100%;
    background: linear-gradient(180deg, var(--color-info), var(--color-success));
    box-shadow: var(--glow-blue);

.unified-widget-header::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--color-info-rgb, 91, 192, 222), 0.1));
    pointer-events: none;
    animation: headerShimmer 3s ease-in-out infinite;

@keyframes headerShimmer {
    0%, 100% {
        opacity: 0.3;
        transform: translateX(0);

    50% {
        opacity: 0.6;
        transform: translateX(-20px);

.unified-widget-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);

.unified-widget-close {
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    opacity: 0.7;

.unified-widget-close:hover {
    background: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.1);
    transform: rotate(90deg);
    opacity: 1;

.unified-widget-close:focus {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;

/* Tabs */
.unified-widget-tabs {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    border-bottom: calc(var(--spacing-xs) / 2) solid var(--color-border);
    background: linear-gradient(180deg, var(--color-bg-tertiary), var(--color-bg-secondary));
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    position: relative;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;

.unified-widget-tabs::-webkit-scrollbar {
    height: var(--spacing-sm);

.unified-widget-tabs::-webkit-scrollbar-track {
    background: transparent;

.unified-widget-tabs::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-xs);

.unified-widget-tabs::-webkit-scrollbar-thumb:hover {
    background: var(--color-info);

.unified-widget-tabs::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: calc(var(--spacing-xs) / 2);
    background: var(--color-info);
    transition: width var(--transition-base), left var(--transition-base);
    z-index: 1;

.unified-widget-tab {
    flex: 0 0 auto;
    min-width: fit-content;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    text-align: center;
    line-height: 1.2;

.unified-widget-tab::before {
    content: '';
    position: absolute;
    bottom: -calc(var(--spacing-xs) / 2);
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 80%;
    height: calc(var(--spacing-xs) / 2);
    background: var(--color-info);
    transition: transform var(--transition-base);

.unified-widget-tab:hover {
    background: rgba(var(--color-info-rgb, 91, 192, 222), 0.1);
    color: var(--color-text-primary);
    transform: translateY(-2px);

.unified-widget-tab.active {
    background: rgba(var(--color-info-rgb, 91, 192, 222), 0.15);
    color: var(--color-info);
    border-color: var(--color-info);
    box-shadow: var(--shadow-sm);
    font-weight: var(--font-weight-bold);

.unified-widget-tab.active::before {
    transform: translateX(-50%) scaleX(1);
    animation: tabIndicatorPulse 2s ease-in-out infinite;

@keyframes tabIndicatorPulse {
    0%, 100% {
        opacity: 1;

    50% {
        opacity: 0.7;

.unified-widget-tab:focus {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;

/* Tab icon and label */
.unified-widget-tab .tab-icon {
    font-size: 1.1em;
    line-height: 1;
    flex-shrink: 0;

.unified-widget-tab .tab-label {
    flex-shrink: 0;
    margin-left: var(--spacing-xs);

/* Compact mode for smaller tabs */
@media (max-width: 600px) {
    .unified-widget-tab .tab-label {
        display: none;

    .unified-widget-tab {
        min-width: calc(var(--spacing-2xl) * 1.375);
        padding: var(--spacing-sm);
        aspect-ratio: 1;

    .unified-widget-tab .tab-icon {
        margin: 0;

/* Content */
.unified-widget-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
    background: linear-gradient(180deg, var(--color-bg-primary), var(--color-bg-secondary));
    min-height: 0;

.unified-widget-tab-content {
    animation: fadeInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);

    to {
        opacity: 1;
        transform: translateY(0);

@keyframes successBounce {
    0% {
        transform: scale(0);
        opacity: 0;

    50% {
        transform: scale(1.2);

    100% {
        transform: scale(1);
        opacity: 1;

/* Support Chat */
.support-chat-container {
    display: flex;
    flex-direction: column;
    height: 520px;
    min-height: 400px;
    max-height: calc(88vh - 250px);
    position: relative;

.support-chat-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-info), transparent);
    opacity: 0.3;

.support-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    border: 1px solid var(--color-border);
    box-shadow: inset 0 2px 4px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.1);

.chat-message {
    max-width: 85%;
    animation: messageSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-bottom: var(--spacing-xs);

.chat-message.message-group-start {
    margin-top: var(--spacing-md);

.chat-message.message-grouped {
    margin-top: var(--spacing-xs);

.message-bubble {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);

.message-bubble:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);

    to {
        opacity: 1;
        transform: translateY(0) scale(1);

/* Message Header */
.message-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-xs);

.message-avatar {
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;

.message-sender {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);

.message-time {
    margin-left: auto;
    color: var(--color-text-dim);
    font-size: 0.85em;
    opacity: 0.7;

.message-content {
    line-height: 1.5;

/* User Messages */
.user-message {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
    color: var(--color-text-primary);
    border-bottom-right-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm), 0 2px 8px rgba(var(--color-info-rgb, 91, 192, 222), 0.3);

.user-message .message-header {
    color: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.9);

.user-message .message-sender {
    color: var(--color-text-primary);

.user-message .message-time {
    color: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.7);

.user-message .message-avatar {
    background: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.2);

.user-message::after {
    content: '';
    position: absolute;
    bottom: -var(--spacing-sm);
    right: 0;
    width: 0;
    height: 0;
    border-left: var(--spacing-sm) solid transparent;
    border-right: var(--spacing-sm) solid var(--color-info-dark);
    border-top: var(--spacing-sm) solid var(--color-info-dark);

/* Bot Messages */
.bot-message {
    align-self: flex-start;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-bottom-left-radius: var(--radius-sm);

.bot-message .message-avatar {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);

.bot-message::after {
    content: '';
    position: absolute;
    bottom: -var(--spacing-sm);
    left: 0;
    width: 0;
    height: 0;
    border-right: var(--spacing-sm) solid transparent;
    border-left: var(--spacing-sm) solid var(--color-border);
    border-top: var(--spacing-sm) solid var(--color-border);

/* Message Formatting */
.message-content strong {
    font-weight: var(--font-weight-bold);
    color: inherit;

.message-content em {
    font-style: italic;

.message-content code {
    background: var(--color-bg-tertiary);
    padding: calc(var(--spacing-xs) / 2) calc(var(--spacing-xs) * 1.5);
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    border: 1px solid var(--color-border);

.message-content .code-block {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin: var(--spacing-sm) 0;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    line-height: 1.5;

.message-content .code-block code {
    background: transparent;
    padding: 0;
    border: none;
    font-size: inherit;

.message-content .inline-code {
    background: var(--color-bg-tertiary);
    padding: calc(var(--spacing-xs) / 2) calc(var(--spacing-xs) * 1.5);
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    border: 1px solid var(--color-border);

.message-content .message-link {
    color: var(--color-info);
    text-decoration: underline;
    transition: color var(--transition-base);

.message-content .message-link:hover {
    color: var(--color-info-dark);
    text-decoration: none;

.user-message .message-link {
    color: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.9);
    text-decoration: underline;

.user-message .message-link:hover {
    color: var(--color-text-primary);

.message-content .message-list {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);

.message-content .message-list li {
    margin: var(--spacing-xs) 0;
    line-height: 1.5;

.message-content .message-quote {
    border-left: calc(var(--spacing-xs) * 0.75) solid var(--color-info);
    padding-left: var(--spacing-md);
    margin: var(--spacing-sm) 0;
    font-style: italic;
    color: var(--color-text-secondary);

.message-content .message-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-sm) 0;
    font-size: 0.9em;

.message-content .message-table th,
.message-content .message-table td {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    text-align: left;

.message-content .message-table th {
    background: var(--color-bg-tertiary);
    font-weight: var(--font-weight-bold);

.llm-badge {
    display: inline-block;
    margin-left: var(--spacing-xs);
    font-size: 0.85em;
    opacity: 0.7;
    cursor: help;
    vertical-align: middle;

.suggested-questions {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);

.suggested-questions-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-dim);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-bold);

.suggested-questions-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);

.suggested-question-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-base);

.suggested-question-btn:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-info);
    color: var(--color-text-primary);
    transform: translateX(4px);

.message-feedback {
    margin-top: var(--spacing-xs);
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;

.feedback-btn {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs);
    cursor: pointer;
    font-size: var(--font-size-base);
    transition: all var(--transition-base);
    opacity: 0.6;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--spacing-xl);
    height: calc(var(--spacing-xl) * 1.167);

.feedback-btn:hover {
    opacity: 1;
    background: var(--color-bg-hover);
    border-color: var(--color-info);
    transform: scale(1.1);

.feedback-btn:active {
    transform: scale(0.95);

.message-content {
    line-height: var(--line-height-relaxed);
    word-wrap: break-word;

.message-content strong {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-weight-bold);
    opacity: 0.9;

.message-content ul {
    margin: var(--spacing-xs) 0;
    padding-left: var(--spacing-lg);

.message-content li {
    margin: var(--spacing-xs) 0;

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    align-self: flex-start;

.typing-indicator span {
    width: var(--spacing-sm);
    height: var(--spacing-sm);
    border-radius: var(--radius-full);
    background: var(--color-text-secondary);
    animation: typing 1.4s ease-in-out infinite;

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;

    30% {
        transform: translateY(-10px);
        opacity: 1;

.support-chat-input-container {
    display: flex;
    gap: 0.5rem;
    align-items: center;

.support-chat-clear {
    padding: var(--spacing-sm);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: var(--font-size-lg);
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: calc(var(--spacing-2xl) * 1.125);
    height: calc(var(--spacing-2xl) * 1.125);

.support-chat-clear:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-failure);
    color: var(--color-failure);
    transform: scale(1.1);

.support-chat-clear:active {
    transform: scale(0.95);

.support-chat-input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    transition: all var(--transition-base);
    resize: vertical;
    min-height: calc(var(--spacing-2xl) * 1.25);
    max-height: 120px;
    line-height: 1.5;

.support-chat-input:focus {
    outline: none;
    border-color: var(--color-info);
    box-shadow: 0 0 0 3px rgba(var(--color-info-rgb, 91, 192, 222), 0.2), var(--glow-blue);
    background: var(--color-bg-tertiary);

.support-chat-input::placeholder {
    color: var(--color-text-dim);

.support-chat-send {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-info);
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    cursor: pointer;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);

.support-chat-send:hover {
    background: var(--color-info-dark);
    transform: translateY(-2px);
    box-shadow: var(--glow-blue), var(--shadow-md);

.support-chat-send:active {
    transform: translateY(0);

.support-chat-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;

/* Feedback Form */
.feedback-form-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);

.feedback-intro {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    padding: var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-left: calc(var(--spacing-xs) * 0.75) solid var(--color-info);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;

.feedback-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--spacing-xs) * 0.75);
    height: 100%;
    background: var(--color-info);
    box-shadow: var(--glow-blue);

.feedback-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);

.feedback-section label {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--spacing-xs);

.feedback-select,
.feedback-textarea {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    transition: all var(--transition-base);

.feedback-select:focus,
.feedback-textarea:focus {
    outline: none;
    border-color: var(--color-info);
    box-shadow: 0 0 0 3px rgba(var(--color-info-rgb, 91, 192, 222), 0.2);
    background: var(--color-bg-tertiary);

.feedback-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: var(--line-height-relaxed);

.feedback-rating {
    display: flex;
    gap: var(--spacing-xs);
    justify-content: space-between;

.rating-btn {
    flex: 1;
    padding: var(--spacing-sm);
    background: var(--color-bg-input);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1.75rem;
    cursor: pointer;
    transition: all var(--transition-base);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;

.rating-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-info), var(--color-success));
    opacity: 0;
    transition: opacity var(--transition-base);

.rating-btn:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-info);
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow-sm);

.rating-btn:hover::before {
    opacity: 0.1;

.rating-btn.selected {
    background: var(--color-info);
    border-color: var(--color-info);
    box-shadow: var(--glow-blue), var(--shadow-md);
    transform: scale(1.1);

.rating-btn.selected::before {
    opacity: 0.2;

.rating-btn:focus {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;

.feedback-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: background var(--transition-base);

.feedback-checkbox:hover {
    background: var(--color-bg-tertiary);

.feedback-checkbox input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--color-info);

.feedback-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;

/* Sessions */
.sessions-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;

.sessions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

.sessions-header h3 {
    margin: 0;
    color: var(--color-text, var(--color-text-primary));

.sessions-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;

.session-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: calc(var(--spacing-xs) * 0.75) solid var(--color-info);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;

.session-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--spacing-xs) * 0.75);
    height: 100%;
    background: var(--color-info);
    transform: scaleY(0);
    transition: transform var(--transition-base);

.session-item:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-info);
    transform: translateX(4px);
    box-shadow: var(--shadow-md), var(--glow-blue);

.session-item:focus {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;

.session-item:hover::before {
    transform: scaleY(1);

.session-item.current-session {
    border-left-color: var(--color-success);
    background: rgba(var(--color-success-rgb, 92, 184, 92), 0.1);
    box-shadow: var(--glow-green), var(--shadow-sm);

.session-item.current-session::before {
    background: var(--color-success);
    transform: scaleY(1);
    box-shadow: var(--glow-green);

.session-item.current-session:hover {
    box-shadow: var(--glow-green), var(--shadow-md);

.session-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;

.session-info strong {
    color: var(--color-info);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-heading);
    letter-spacing: var(--letter-spacing-tight);

.session-info span {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);

.session-actions {
    display: flex;
    gap: 0.5rem;

.current-badge {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-success);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    box-shadow: var(--glow-green), var(--shadow-sm);
    color: var(--color-text-primary);

.loading-state,
.empty-state,
.error-state {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);

.loading-state {
    gap: var(--spacing-sm);

.error-state {
    background: rgba(var(--color-failure-rgb, 217, 83, 79), 0.1);
    border: 1px solid var(--color-failure);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);

.error-state strong {
    color: var(--color-failure);
    font-size: var(--font-size-md);
    display: block;
    margin-bottom: var(--spacing-xs);

.error-state p {
    color: var(--color-text-secondary);
    margin: var(--spacing-xs) 0;

/* Help */
.help-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;

.help-search-section h3,
.help-settings-section h3,
.help-quick-links h3 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    padding-bottom: var(--spacing-sm);
    border-bottom: calc(var(--spacing-xs) / 2) solid var(--color-border);

.help-search-container {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;

.help-search-input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    transition: all var(--transition-base);

.help-search-input:focus {
    outline: none;
    border-color: var(--color-info);
    box-shadow: 0 0 0 3px rgba(var(--color-info-rgb, 91, 192, 222), 0.2), var(--glow-blue);
    background: var(--color-bg-tertiary);

.help-search-input::placeholder {
    color: var(--color-text-dim);

.help-search-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-info);
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    cursor: pointer;
    font-size: var(--font-size-lg);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: calc(var(--spacing-2xl) * 1.375);

.help-search-btn:hover {
    background: var(--color-info-dark);
    transform: scale(1.1);
    box-shadow: var(--glow-blue), var(--shadow-md);

.help-search-btn:active {
    transform: scale(0.95);

.help-search-results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: var(--spacing-md);

.help-sections-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);

.help-section-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition-base);

.help-section-card:hover {
    border-color: var(--color-info);
    box-shadow: var(--shadow-sm);

.help-section-header {
    width: 100%;
    padding: var(--spacing-md);
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    text-align: left;
    transition: all var(--transition-base);

.help-section-header:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-info);

.help-section-icon {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    line-height: 1;

.help-section-title {
    flex: 1;
    text-align: left;

.help-section-toggle {
    font-size: var(--font-size-sm);
    transition: transform var(--transition-base);
    color: var(--color-text-secondary);
    flex-shrink: 0;
    width: calc(var(--spacing-lg) * 1.25);
    text-align: center;

.help-section-card.expanded .help-section-toggle {
    transform: rotate(180deg);

.section-icon {
    font-size: var(--font-size-lg);
    flex-shrink: 0;

.section-title {
    flex: 1;

.section-arrow {
    font-size: var(--font-size-sm);
    transition: transform var(--transition-base);
    color: var(--color-text-secondary);

.help-section-content {
    padding: 0 var(--spacing-md) var(--spacing-md);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    animation: slideDown 0.3s ease-out;

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;

    to {
        opacity: 1;
        max-height: 504px;
        padding-top: var(--spacing-md);
        padding-bottom: var(--spacing-md);

.help-section-link {
    display: inline-block;
    margin-top: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--color-info);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    border-bottom: 1px solid var(--color-info);
    transition: all var(--transition-base);

.help-section-link:hover {
    color: var(--color-info-dark);
    border-color: var(--color-info-dark);
    transform: translateX(4px);

.help-section-body {
    padding-top: var(--spacing-md);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);

.help-section-body h5 {
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    margin: var(--spacing-md) 0 var(--spacing-sm);
    font-family: var(--font-heading);

.help-section-body h5:first-child {
    margin-top: 0;

.help-section-body ul,
.help-section-body ol {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);

.help-section-body li {
    margin: var(--spacing-xs) 0;
    line-height: var(--line-height-relaxed);

.help-section-body dl {
    margin: var(--spacing-sm) 0;

.help-section-body dt {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-top: var(--spacing-sm);

.help-section-body dd {
    margin-left: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-secondary);

.help-roll-results {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin: var(--spacing-md) 0;

.roll-result {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    text-align: center;

.roll-result.critical-success {
    background: rgba(var(--color-success-rgb, 92, 184, 92), 0.2);
    border: 1px solid var(--color-success);
    color: var(--color-success);

.roll-result.success {
    background: rgba(var(--color-info-rgb, 91, 192, 222), 0.2);
    border: 1px solid var(--color-info);
    color: var(--color-info);

.roll-result.failure {
    background: rgba(170, 170, 170, 0.2);
    border: 1px solid var(--color-text-secondary);
    color: var(--color-text-secondary);

.roll-result.critical-failure {
    background: rgba(var(--color-failure-rgb, 217, 83, 79), 0.2);
    border: 1px solid var(--color-failure);
    color: var(--color-failure);

.help-read-more {
    display: inline-block;
    margin-top: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--color-info);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    border-bottom: 1px solid var(--color-info);
    transition: all var(--transition-base);

.help-read-more:hover {
    color: var(--color-info-dark);
    border-color: var(--color-info-dark);

.help-full-center-link {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);

.help-result-item {
    padding: var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: calc(var(--spacing-xs) * 0.75) solid var(--color-info);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    cursor: pointer;

.help-result-item:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-info);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm), var(--glow-blue);

.help-result-item:focus {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;

.help-result-item h4 {
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--color-info);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);

.help-result-item p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-sm);

.no-results {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);

.no-results strong {
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    margin-top: var(--spacing-sm);
    display: block;

.no-results p {
    color: var(--color-text-dim);
    font-size: var(--font-size-sm);
    margin: 0;

.settings-group {
    margin-bottom: 1.5rem;

.settings-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    margin-bottom: 0.5rem;

.settings-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-dim);
    margin: var(--spacing-xs) 0 0 0;
    line-height: var(--line-height-relaxed);
    font-style: italic;

.volume-control {
    display: flex;
    align-items: center;
    gap: 1rem;

.volume-control input[type="range"] {
    flex: 1;

.volume-value {
    min-width: calc(var(--spacing-3xl) * 1.25);
    text-align: right;
    color: var(--color-text, var(--color-text-primary));

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;

.quick-link-btn {
    padding: var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: calc(var(--spacing-xs) * 0.75) solid var(--color-info);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: left;
    font-size: var(--font-size-sm);
    position: relative;
    overflow: hidden;

.quick-link-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--spacing-xs) * 0.75);
    height: 100%;
    background: var(--color-info);
    transform: scaleY(0);
    transition: transform var(--transition-base);

.quick-link-btn:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-info);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);

.quick-link-btn:hover::before {
    transform: scaleY(1);
    box-shadow: var(--glow-blue);

.quick-link-btn:focus {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;

/* Accessibility */
.accessibility-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;

.accessibility-intro {
    color: var(--color-text-secondary, #aaa);
    line-height: 1.6;

.accessibility-section {
    padding: 1rem;
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.2);
    border-radius: var(--radius-md, calc(var(--radius-sm) * 1.5));

.accessibility-section h3 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);

.preference-item {
    margin-bottom: 1.5rem;

.preference-item:last-child {
    margin-bottom: 0;

.preference-item label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
    transition: color var(--transition-base);

.preference-item label:hover {
    color: var(--color-info);

.preference-description {
    font-size: var(--font-size-xs);
    color: var(--color-text-dim);
    margin: var(--spacing-xs) 0 0 1.75rem;
    line-height: var(--line-height-relaxed);
    font-style: italic;

.preference-item input[type="range"] {
    flex: 1;
    margin: 0 var(--spacing-sm);
    height: calc(var(--spacing-xs) * 1.5);
    background: var(--color-bg-input);
    border-radius: var(--radius-sm);
    outline: none;
    -webkit-appearance: none;

.preference-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: calc(var(--spacing-md) * 1.5);
    height: calc(var(--spacing-md) * 1.5);
    background: var(--color-info);
    border-radius: var(--radius-full);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);

.preference-item input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: var(--glow-blue);

.preference-item input[type="range"]::-moz-range-thumb {
    width: calc(var(--spacing-md) * 1.5);
    height: calc(var(--spacing-md) * 1.5);
    background: var(--color-info);
    border-radius: var(--radius-full);
    cursor: pointer;
    border: none;
    box-shadow: var(--shadow-sm);

.preference-item input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--color-info);
    width: calc(var(--spacing-md) * 1.5);
    height: calc(var(--spacing-md) * 1.5);

.accessibility-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;

/* Action Buttons */
.action-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-info);
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    cursor: pointer;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    font-family: var(--font-heading);

.action-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: var(--radius-full);
    background: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;

.action-btn:hover::before {
    width: 304px;
    height: 304px;

.action-btn:hover {
    background: var(--color-info-dark);
    transform: translateY(-2px);
    box-shadow: var(--glow-blue), var(--shadow-md);

.action-btn:active {
    transform: translateY(0);

.action-btn:focus {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;

.action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;

.action-btn.btn-primary {
    background: var(--color-info);

.action-btn.btn-secondary {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);

.action-btn.btn-secondary:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-info);
    color: var(--color-info);

.action-btn.btn-sm {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xs);

/* Scrollbar */
.unified-widget-content::-webkit-scrollbar,
.support-chat-messages::-webkit-scrollbar,
.sessions-list::-webkit-scrollbar {
    width: var(--spacing-sm);

.unified-widget-content::-webkit-scrollbar-track,
.support-chat-messages::-webkit-scrollbar-track,
.sessions-list::-webkit-scrollbar-track {
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);

.unified-widget-content::-webkit-scrollbar-thumb,
.support-chat-messages::-webkit-scrollbar-thumb,
.sessions-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-bg-tertiary);
    transition: background var(--transition-base);

.unified-widget-content::-webkit-scrollbar-thumb:hover,
.support-chat-messages::-webkit-scrollbar-thumb:hover,
.sessions-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-info);
    border-color: var(--color-bg-tertiary);

/* Firefox scrollbar */
.unified-widget-content,
.support-chat-messages,
.sessions-list {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) var(--color-bg-tertiary);

/* Hide old buttons when unified widget is present */
#feedback-button,
#accessibility-button,
#contextual-help-btn,
.contextual-help-btn,
.help-button,
.help-button-fixed,
#help-button {
    display: none !important;

/* Current session styling */
.session-item.current-session {
    border-color: var(--color-success, #5cb85c);
    background: rgba(var(--color-success-rgb, 92, 184, 92), 0.1);

/* Loading States */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    color: var(--color-text-secondary);
    gap: var(--spacing-md);

.loading-spinner {
    width: calc(var(--spacing-2xl) * 1.25);
    height: calc(var(--spacing-2xl) * 1.25);
    border: 3px solid var(--color-border);
    border-top-color: var(--color-info);
    border-radius: var(--radius-full);
    animation: spin 1s linear infinite;

@keyframes spin {
    to { transform: rotate(360deg); }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }

/* Error States */
.error-state {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--color-failure);
    background: rgba(var(--color-failure-rgb, 217, 83, 79), 0.1);
    border: 1px solid var(--color-failure);
    border-radius: var(--radius-md);

/* Empty States */
.empty-state {
    padding: var(--spacing-2xl);
    text-align: center;
    color: var(--color-text-secondary);

.empty-state::before {
    content: '📭';
    display: block;
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.4;
    filter: grayscale(0.3);

.empty-state {
    padding: var(--spacing-2xl);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);

/* Mobile Touch Optimizations */
@media (max-width: 768px) {
    .unified-widget {
        touch-action: pan-y;

    .unified-widget-tabs {
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;

    /* Larger touch targets on mobile */
    .unified-widget-tab {
        min-height: var(--spacing-2xl);
        min-width: var(--spacing-2xl);
        padding: var(--spacing-sm) var(--spacing-md);

    .action-btn,
    .support-chat-send,
    .support-chat-clear,
    .help-search-btn {
        min-height: calc(var(--spacing-2xl) * 1.375);
        min-width: calc(var(--spacing-2xl) * 1.375);

    /* Better spacing for touch */
    .chat-message {
        padding: var(--spacing-md);

    .message-feedback {
        gap: var(--spacing-sm);

    .feedback-btn {
        min-width: calc(var(--spacing-2xl) * 1.375);
        min-height: calc(var(--spacing-2xl) * 1.375);

    /* Swipe indicator */
    .unified-widget::before {
        content: '';
        position: absolute;
        top: var(--spacing-sm);
        left: 50%;
        transform: translateX(-50%);
        width: calc(var(--spacing-2xl) * 1.25);
        height: var(--spacing-sm);
        background: var(--color-border);
        border-radius: var(--radius-xs);
        opacity: 0.5;

/* Mobile Responsive */
@media (max-width: 768px) {
    .unified-widget {
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        height: 100vh !important;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;

    .unified-widget-fab {
        bottom: var(--spacing-sm) !important;
        right: var(--spacing-sm) !important;
        width: calc(var(--spacing-3xl) * 1.167);
        height: calc(var(--spacing-3xl) * 1.167);
        font-size: 1.6rem;
        z-index: 9999 !important;

    .unified-widget-header {
        padding: var(--spacing-sm) var(--spacing-md);
        flex-shrink: 0;

    .unified-widget-header h2 {
        font-size: var(--font-size-lg);

    .unified-widget-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: var(--spacing-xs);
        -webkit-overflow-scrolling: touch;
        flex-shrink: 0;

    .unified-widget-tab {
        min-width: 80px;
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs) var(--spacing-sm);

    .unified-widget-tab .tab-label {
        display: none;

    .unified-widget-tab .tab-icon {
        font-size: 1.2rem;

    .unified-widget-content {
        padding: var(--spacing-md);
        overflow-y: auto;
        overflow-x: hidden;
        flex: 1;
        min-height: 0;
        -webkit-overflow-scrolling: touch;

    .support-chat-container {
        height: calc(100vh - 250px);
        min-height: 304px;
        max-height: calc(100vh - 250px);

    .support-chat-messages {
        max-height: calc(100vh - 350px);

    .quick-links-grid {
        grid-template-columns: 1fr;

    .session-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);

    .session-actions {
        width: 100%;
        justify-content: flex-end;

    .bot-message::before {
        display: none;

    .help-section-card {
        margin-bottom: var(--spacing-sm);

    .help-section-header {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);

    .help-search-container {
        flex-direction: column;
        gap: var(--spacing-sm);

    .help-search-input {
        width: 100%;

    .help-search-btn {
        width: 100%;

/* Small Mobile (phones in portrait) */
@media (max-width: 480px) {
    .unified-widget {
        border-radius: 0;

    .unified-widget-fab {
        width: 56px;
        height: 56px;
        font-size: 1.4rem;
        bottom: var(--spacing-xs) !important;
        right: var(--spacing-xs) !important;

    .unified-widget-header {
        padding: var(--spacing-xs) var(--spacing-sm);

    .unified-widget-header h2 {
        font-size: var(--font-size-md);

    .unified-widget-tab {
        min-width: calc(var(--spacing-3xl) * 1.25);
        padding: var(--spacing-xs);

    .unified-widget-content {
        padding: var(--spacing-sm);

    .support-chat-container {
        height: calc(100vh - 220px);

    .support-chat-input-container {
        flex-wrap: wrap;

    .support-chat-input {
        width: 100%;
        margin-bottom: var(--spacing-xs);

    .support-chat-send,
    .support-chat-clear {
        flex: 1;
        min-width: 80px;

/* Tablet Responsive */
@media (min-width: 768px) and (max-width: 1024px) {
    .unified-widget {
        max-width: 552px;

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}