/* ==UserStyle==
@name           Kagi responsive + customizations
@version        1.0.0
@description    Kagi websites are more suitable for wide screens.
@author         BreatFR (https://breat.fr)
@namespace      https://gitlab.com/breatfr
@homepageURL    https://gitlab.com/breatfr/kagi
@supportURL     https://discord.gg/Q8KSHzdBxs
@license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor   stylus

@var    text        fontsize        "Custom Font size"  1.2rem
@var    checkbox    darkmode        "Dark mode"         1
@var    checkbox    hidescrollbars  "Hide scrollbars"   1
@var    checkbox    hidesidebar		"Hide sidebar"   	1
@var    checkbox    savespace       "Save space"        1
@var    checkbox    widemode        "Wide mode"         1
@downloadURL https://update.greasyfork.org/scripts/558528/Kagi%20responsive%20%2B%20customizations.user.css
@updateURL https://update.greasyfork.org/scripts/558528/Kagi%20responsive%20%2B%20customizations.meta.css
==/UserStyle== */

/* === Credits ===
Website         https://breat.fr
facebook        https://www.facebook.com/breatfroff
mastodon        https://mastodon.social/@breat_fr
telegram        https://t.me/breatfr
vk              https://vk.com/breatfroff
X (twitter)     https://x.com/breatfroff
=== Credits === */

@-moz-document domain("kagi.com") {
    /* Domain */
    .cm-line,
    .font-universal,
    button > span,
    input,
    input::placeholder,
    label,
    textarea,
    textarea::placeholder {
        font-size: fontsize !important;
        line-height: 1.5 !important;
    }
    
    if hidescrollbars {
        *,
        :root ::-webkit-scrollbar {
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
            -moz-overflow-style: none !important;
            -webkit-overflow-style: none !important;
        }
        ::-webkit-scrollbar {
            display: none;
            width: 0;
        }
    }
}

@-moz-document url("https://kagi.com/assistant") {
	/* Assistant */
	if widemode {
		#prompt-box {
			flex: 0 1 auto;
			margin: auto;
			padding: 1em;
		}
		#prompt-box::before {
			display: none;
		}
	}
}

@-moz-document url-prefix("https://kagi.com/assistant") {
    /* Assistant */
	.thread-more-menu {
		left: 15% !important;
	}
	
	#promptBox {
		border: 1px solid #454549;
		border-radius: 1em;
		padding: 1em;
	}
	.rich-placeholder {
		align-items: center;
		display: flex;
		padding-bottom: .5em;
		padding-left: 1em;
	}
	
	if hidesidebar {
		.tags-pane {
			display: none !important;
		}
		.sidebar-box {
			width: 300px !important;
		}
		.main-center-box {
			margin-left: 300px!important;
		}
		.thread-more-menu {
			left: 8.5% !important;
		}
	}
	
    if widemode {     
        .tags-pane {
            width: auto !important;
        }
		#chat_box,
		#prompt-box,
 		form#form {
			max-width: 100%;
		}
        #chat_box {
            padding: 0 2em;
        }
		#prompt-box {
			padding: 0 1em 1em 1em;
        }
		form#form {
			position: relative;
		}
		#prompt-box-focus-hint {
			margin-bottom: .75em;
			position: absolute !important;
		}
		.rich-placeholder {
			left: auto;
			padding-left: 0;
			right: 1em;
		}
		
		.sidebar-box {
			z-index: auto;
		}
		.prompt-options {
			align-items: center;
			bottom: 1em;
			left: 1em;
			margin-top: 0;
			position: fixed;
			right: auto;
			z-index: 9999;
		}
		
		.chat_bubble[data-author="assistant"],
 		.chat_bubble[data-author="user"] {
			border: 1px solid #454549;
			border-radius: 1em;
			margin: 1em 0;
			max-width: 80%;
			padding: 1em 1em 0 1em;
		}
		.chat_bubble[data-author="assistant"]::before,
 		.chat_bubble[data-author="user"]::before {
			display: none;
		}
		.chat_bubble[data-author="user"] {
			margin-left: auto;
		}
		.chat_bubble[data-author="user"] > div.content,
 		.chat_bubble[data-author="user"] [data-files] {
			display: flex;
			justify-content: flex-end;
		}
		
		form#form {
			display: flex;
			flex-direction: column-reverse;
		}
		
		#usage-limit-notice {
			justify-content: center;
			margin: auto;
			width: fit-content;
		}
		#usage-limit-notice p {
			text-align: center;
		}
    }
}

@-moz-document domain("news.kagi.com") {   
    /* News */    
	if darkmode {
        :root {
            color-scheme: dark !important;
        }
	}
	
	if widemode {
        main > div {
            max-width: 100%;
        }
        form > div:nth-of-type(2) > div > div {
            min-height: 100%;
        }
    }
}

@-moz-document domain("translate.kagi.com") {   
    /* Translate */    
    if darkmode {
        :root {
            color-scheme: dark !important;
        }
		
		.transition-colors {
			display: none;
		}

        /* Logo */
        [href="/"] {
            background: url("data:image/svg+xml,%3Csvg width='112' height='42' viewBox='0 0 112 42' fill='%23ffb319' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M59.624 33.134h-7.376c-1.996 0-2.343-2.148-1.996-3.008.173-.43.607-1.03.954-1.46 1.389.773 3.038 1.203 4.773 1.203 5.554 0 9.98-4.469 9.98-9.883 0-2.921-1.301-5.5-3.297-7.39l.26-.258c.52-.515 1.302-.86 2.083-.773l1.215.086V6.924h-2.083c-2.43 0-4.426 1.461-5.294 3.524-.868-.258-1.822-.43-2.777-.43-5.554 0-9.98 4.469-9.98 9.882 0 2.149.694 4.211 1.91 5.844a2.6 2.6 0 0 1-.608.43l-.26.257c-1.996 1.89-2.951 4.297-2.43 7.047.26 1.46 1.562 3.008 2.863 3.867.868.601 1.996.86 3.125.86l8.33-.345c.955 0 1.823.43 2.344 1.29l1.041 1.976 5.12-1.719-.867-1.89a7.79 7.79 0 0 0-7.03-4.383M56.066 15.26c2.604 0 4.773 2.148 4.773 4.726s-2.17 4.727-4.773 4.727-4.773-2.149-4.773-4.727c0-2.664 2.083-4.726 4.773-4.726M30.547 9.931c-5.207.258-9.546 4.383-9.893 9.54-.434 6.1 4.426 11.17 10.414 11.17 1.996 0 3.818-1.117 5.38-2.062v1.805h5.12V19.9c-.26-5.758-5.12-10.226-11.02-9.969m.52 15.898c-3.123 0-5.553-2.492-5.553-5.5 0-3.093 2.516-5.5 5.554-5.5 3.124 0 5.554 2.493 5.554 5.5.087 3.008-2.43 5.5-5.554 5.5'/%3E%3Cpath d='M20.741 10.275h-7.203L7.29 16.463 5.12 18.61V6.752H0v23.632h5.12v-8.851l2.17 2.148v-.086l6.769 6.789h7.203L10.241 20.072zM70.902 28.58v1.718h5.12V10.276h-5.12zm2.521-21.14c1.821 0 3.298-1.462 3.298-3.266 0-1.803-1.477-3.265-3.298-3.265s-3.298 1.462-3.298 3.265 1.477 3.266 3.298 3.266'/%3E%3Cg clip-path='url(%23b)' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M92.242 11.063c.568 0 1.029.46 1.029 1.028v7.151c0 .568-.46 1.029-1.029 1.029h-7.15c-.569 0-1.03-.46-1.03-1.029v-7.15c0-.569.461-1.03 1.03-1.03zm2.654 1.028a2.654 2.654 0 0 0-2.654-2.653h-7.15a2.654 2.654 0 0 0-2.654 2.653v7.151a2.654 2.654 0 0 0 2.653 2.654h7.151a2.654 2.654 0 0 0 2.654-2.654z'/%3E%3Cpath d='M100.977 19.73h-6.352v-1.626h6.352a2.58 2.58 0 0 1 2.389 1.596c.13.314.197.65.197.99v7.287a2.586 2.586 0 0 1-2.586 2.585H93.69a2.586 2.586 0 0 1-2.586-2.585v-6.352h1.625v6.352a.96.96 0 0 0 .961.96h7.287a.96.96 0 0 0 .961-.96V20.69a.96.96 0 0 0-.961-.96m-12.852-7.584c.449 0 .813.364.813.812v.271h1.895a.812.812 0 1 1 0 1.625h-.478a9.8 9.8 0 0 1-.964 2.023c.479.42.915.686 1.442.686a.812.812 0 1 1 0 1.625c-1.04 0-1.845-.513-2.445-1.026a3.2 3.2 0 0 1-.634.492c-.48.282-1.017.415-1.662.522a.812.812 0 1 1-.267-1.602c.596-.1.89-.195 1.107-.322.21-.123.414-.317.746-.754a7.7 7.7 0 0 0 .939-1.644h-2.659a.813.813 0 0 1 0-1.625h1.355v-.27c0-.45.363-.813.812-.813'/%3E%3Cpath d='m97.333 23.442-.58 1.162h1.162zm1.394 2.787.588 1.176a.813.813 0 1 0 1.453-.727l-2.514-5.029a1.03 1.03 0 0 0-1.841 0l-2.515 5.03a.813.813 0 1 0 1.454.726l.588-1.176z'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h112v40H0z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M80 7h26v26H80z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") center center / cover no-repeat;
            height: 0;
            padding-left: 112px;
            padding-top: 42px;
            width: 0;
        }
    }
    
    /* Save space */
    if savespace {
        main > div > div > div > div:nth-of-type(1),
        main > div > div > div > div:nth-of-type(5) {
            padding: 2em;
        }
        main > div > div > div > div:nth-of-type(1) > div:nth-of-type(1) {
            left: 11%;
            position: fixed;
            top: .6em;
            width: auto;
        }
        main > div > div > div > div:nth-of-type(1) > div:nth-of-type(2) {
            max-width: 100%
        }
        main > div > div > div > div:nth-of-type(5) > div:nth-of-type(1) {
            right: 10%;
            position: fixed;
            top: .8em;
            width: auto;
        }
    }
    
    /* Wide mode */
    if widemode {
        main > div {
            max-width: 100%;
        }
        form > div:nth-of-type(2) > div > div {
            min-height: 100%;
        }
    }
}