/* Oliyon Research: the look of the Thanglish switch and the microphone inside a search box (oliyon-typing.js).
   Shared copy: copy unchanged. A tool can tune the colours with --oty-ink, --oty-accent and --oty-bg. */
.oty-wrap { position: relative; display: block; width: 100%; }
.oty-wrap > input { width: 100%; box-sizing: border-box; }
.oty-wrap.oty-1 > input { padding-right: 46px !important; }
.oty-wrap.oty-2 > input { padding-right: 84px !important; }
.oty { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: flex; gap: 4px; align-items: center; }
.oty button {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; margin: 0;
  border: 1px solid transparent; border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--oty-ink, currentColor); font: 600 16px/1 "Noto Sans Tamil", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.oty button:hover { background: var(--oty-bg, rgba(127, 127, 127, .12)); }
.oty button:focus-visible { outline: 2px solid var(--oty-accent, #e9a108); outline-offset: 1px; }
.oty .oty-th { color: var(--oty-accent, #b77a00); border-color: var(--oty-accent, #e9a108); }
.oty .oty-th.off { color: var(--oty-ink, currentColor); border-color: rgba(127, 127, 127, .45); opacity: .8; }
.oty .oty-mic.on { color: #fff; background: #c2410c; border-color: #c2410c; animation: oty-pulse 1.2s ease-in-out infinite; }
@keyframes oty-pulse { 50% { box-shadow: 0 0 0 6px rgba(194, 65, 12, .18); } }
@media (prefers-reduced-motion: reduce) { .oty .oty-mic.on { animation: none; } }
/* a search input styled with type=search's own clear button: keep it clear of ours */
.oty-wrap > input[type="search"]::-webkit-search-cancel-button { margin-right: 2px; }
/* Seppam's spellings for the word being typed, under the box */
.oty-list { position: absolute; left: 0; right: 0; min-width: min(280px, calc(100vw - 24px)); top: calc(100% + 4px); z-index: 30; display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px; border-radius: 10px; background: var(--oty-pop, #fff); color: #15213a; box-shadow: 0 8px 22px rgba(21, 33, 58, .18); border: 1px solid rgba(127, 127, 127, .25); }
.oty-list[hidden] { display: none; }
.oty-list button { border: 1px solid rgba(233, 161, 8, .55); background: rgba(233, 161, 8, .08); color: inherit; border-radius: 999px;
  padding: 4px 12px; font: 500 15px/1.4 "Noto Sans Tamil", system-ui, sans-serif; cursor: pointer; }
.oty-list button:hover, .oty-list button:focus-visible { background: rgba(233, 161, 8, .22); outline: none; }
/* a "mix" box with Thanglish off: the Tamil spellings offered for the English letters typed */
.oty-list.oty-hint::before { content: "தமிழில் ·"; align-self: center; padding: 0 4px 0 2px; font: 500 13px/1.4 "Noto Sans Tamil", system-ui, sans-serif; opacity: .7; }